/* =====================================================================
   Casa Gobelas · secciones de casagobelas.com (29/09/2026, ronda de calma)
   Mosaico La Florida · Aravaca, piscina (marfil), galeria y visor, situacion
   (mapa de tiempos) y contacto (marfil). Lo que oculta algo para animarlo
   cuelga de html.has-sx, que solo pone secciones.js: sin script, todo se ve
   en su estado final. Calma: 1,2 a 1,8 s con expo o quint de salida, nada
   de grano, desenfoques ni zooms por encima de 1,02, y nada encima de las
   fotos (los efectos van dentro de las imagenes).
   ===================================================================== */
/* tipografia de marca: las @font-face y las pilas (--font-display, Modern Heritage Void con Basic detras;
   --font-body, Basic) estan en gobelas.css */
:root{
  --sx-brand:var(--font-body);
  --sx-green:#26391f;                    /* verde de marca: casilla central, mapa */
  --sx-green-2:#2d4325;
  --sx-lime:#a9bc70;                     /* solo el rotulo del mosaico (y el mapa, que no se toca) */
  --sx-ivory:var(--ivory,#f3efe5);       /* marfil: piscina y contacto */
  --sx-stone:var(--stone,#e6ddcc);
  --sx-ink:var(--ink-on-ivory,#1d2718);  /* tinta sobre marfil */
  --sx-ink-2:rgba(29,39,24,.68);         /* texto secundario sobre marfil (15/10: .62 daba 4,25:1, ahora 5,1:1) */
  --sx-ink-3:rgba(29,39,24,.42);
  --sx-hl:rgba(29,39,24,.14);            /* hairlines sobre marfil */
  --sx-hl-2:rgba(29,39,24,.3);
  --sx-brass:var(--brass,#a88a57);       /* laton: lineas y acentos */
  --sx-brass-t:#7d6640;                  /* el mismo laton, mas hondo, para texto pequeno sobre marfil (AA) */
  --sx-beige:var(--beige,#d4c19e);       /* acento sobre el verde profundo */
  --sx-e:var(--mo-e,cubic-bezier(.16,1,.3,1));
  --sx-q:var(--mo-q,cubic-bezier(.22,1,.36,1));
  --sx-lift:var(--mo-lift,cubic-bezier(.5,0,.1,1));
  --sx-io:cubic-bezier(.45,0,.55,1);     /* fundidos cruzados: seno de entrada y salida */
  --sx-pad:clamp(104px,11.5vw,196px);    /* aire vertical de las secciones */
  --sx-rot:clamp(13px,1.2vw,19px);
}

/* tipografia de marca: titulares y destacados en Modern Heritage Void, siempre en mayusculas (con Basic
   detras para los signos que no tiene); rotulos pequenos, etiquetas, listas, formulario y pies en Basic.
   Las mascaras de los titulares dejan mas aire arriba que abajo: las tildes y la virgulilla de Modern
   Heritage suben al 93 % del cuerpo y sus mayusculas casi no bajan de la linea */
.mosaico__h,.piscina__l--a,.galeria__l>span,.contacto__h,.contacto__ok,.sit-here{font-family:var(--font-display);font-weight:400;text-transform:uppercase}
.piscina__l--b,.galeria__cap,.visor__cap,.visor__sep,.credito__k,.campo__lb,.campo__err,.contacto__btn,.contacto__ok small,.contacto__base{
  font-family:var(--font-body);font-weight:400;text-transform:uppercase}
.sit-lbl,.mp-rlbl,.mp-a6lbl,.mp-north text,.situacion__min{font-family:var(--sx-brand);font-weight:400;text-transform:uppercase}
.piscina__l--a,.galeria__l>span,.contacto__h{text-wrap:balance}

/* ===================== 1 · mosaico ===================== */
/* Como casagodai.com: llega con el scroll normal y LIMPIO, sin placas, sin bruma y sin velo; las fotos
   estan nitidas y a color desde el principio y se tocan sin junta. La vida la ponen los relevos lentos
   dentro de cada casilla y el gesto sereno del rotulo en la casilla verde. */
.mosaico{position:relative;z-index:20;background:var(--sx-green)}
.mosaico__grid{--tw:calc(100vw / 3);
  --row:clamp(calc(var(--tw) / 1.9),calc(100vh / 3),calc(var(--tw) / 1.2));
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:var(--row)}
@supports (height:100svh){.mosaico__grid{--row:clamp(calc(var(--tw) / 1.9),calc(100svh / 3),calc(var(--tw) / 1.2))}}
.mosaico__cell{position:relative;overflow:hidden}
.mosaico__t{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--tono,#2a3325)}
.mosaico__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* si una foto aun no ha llegado se ve su tono y aparece con un fundido corto, nunca un hueco oscuro */
html.has-sx .mosaico__img{transition:opacity .9s var(--sx-q)}
html.has-sx .mosaico__img:not(.is-ld){opacity:0}
html.has-sx .mosaico.sx-fail .mosaico__img{opacity:1}
/* relevo: la nueva (ya decodificada) entra encima con un fundido lento; la de debajo no se mueve hasta
   que queda tapada, asi el fundido nunca deja ver el fondo */
html .mosaico .mosaico__img.is-next{opacity:0;transition:none}
html .mosaico .mosaico__img.is-next.is-on{opacity:1;transition:opacity 2.2s var(--sx-io)}
.mosaico__c{position:absolute;inset:0;display:grid;place-items:center;background:var(--sx-green);text-align:center}
.mosaico__h{position:relative;margin:0;font-size:clamp(13px,1.2vw,22px);line-height:1.5;letter-spacing:.16em;padding-left:.16em;color:var(--sx-lime)}
.mosaico__l{display:block;overflow:hidden;padding:.1em 0 .04em}
.mosaico__l>span{display:block}
@media (max-width:599px){
  .mosaico__grid{--tw:calc(100vw / 2);grid-template-columns:repeat(2,minmax(0,1fr));
    --row:clamp(calc(var(--tw) / 1.5),calc(100vh / 5),calc(var(--tw) / .9))}
  @supports (height:100svh){.mosaico__grid{--row:clamp(calc(var(--tw) / 1.5),calc(100svh / 5),calc(var(--tw) / .9))}}
  .mosaico__cell--c{grid-column:1 / -1}
  .mosaico__h{font-size:13px}
}
/* gesto de la casilla verde: las dos lineas suben de su mascara y el tracking se asienta hacia el centro */
html.has-sx .mosaico:not(.is-in) .mosaico__l>span{transform:translate3d(0,105%,0);letter-spacing:.3em;opacity:0}
html.has-sx .mosaico.is-in .mosaico__l>span{transform:none;opacity:1;
  transition:transform 1.7s var(--sx-e),letter-spacing 2.3s var(--sx-e),opacity 1.3s var(--sx-q)}
html.has-sx .mosaico.is-in .mosaico__l+.mosaico__l>span{transition-delay:.16s}

/* ===================== fotos que se abren sin prisa (piscina, contacto) ===================== */
/* el marco se despliega desde un poco dentro y la foto se asienta de 1,02 a 1; nada por encima */
html.has-sx .sx-open{transition:clip-path 1.8s var(--sx-e),opacity 1.3s var(--sx-q)}
html.has-sx .sx-open:not(.is-in){clip-path:inset(4.5% 3.5% 4.5% 3.5%);opacity:0}
html.has-sx .sx-open.is-in{clip-path:inset(0 0 0 0);opacity:1}
html.has-sx .sx-open img{transition:transform 2.2s var(--sx-e)}
html.has-sx .sx-open:not(.is-in) img{transform:scale(1.02)}
html.has-sx .sx-fail .sx-open{clip-path:none;opacity:1}
html.has-sx .sx-fail .sx-open img{transform:none}

/* ===================== 2 · piscina (marfil) ===================== */
.piscina{position:relative;z-index:20;background:var(--sx-ivory);color:var(--sx-ink);padding:var(--sx-pad) 0;text-align:center}
.piscina__h{margin:0 auto;padding:0 var(--gutter);font-weight:400}
.piscina__l{display:block;overflow:hidden}
.piscina__l>span{display:block}
.piscina__l--a{font-size:clamp(25px,3.6vw,66px);line-height:1.16;letter-spacing:.02em;color:var(--sx-ink);padding:.14em 0 .04em}
.piscina__l--b{margin-top:clamp(18px,1.9vw,32px);font-size:clamp(11px,.92vw,14.5px);line-height:1.6;letter-spacing:.46em;padding-left:.46em;color:var(--sx-brass-t)}
.piscina__fig{position:relative;margin:clamp(58px,6.2vw,112px) auto 0;width:min(1500px,86vw);aspect-ratio:2560 / 1519;overflow:hidden;background:var(--sx-stone)}
.piscina__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){
  .piscina__fig{width:100%}
  .piscina__l--b{letter-spacing:.34em;padding-left:.34em}
}
/* entrada: el titular sube de su mascara, el rotulo se asienta y la foto se abre */
/* la mascara no basta con tildes y acentos (Ñ, Á): el titular baja de sobra y llega fundiendose */
html.has-sx .piscina:not(.is-in) .piscina__l--a>span{transform:translate3d(0,130%,0);opacity:0}
html.has-sx .piscina.is-in .piscina__l--a>span{transform:none;opacity:1;transition:transform 1.7s var(--sx-e),opacity 1.3s var(--sx-q)}
html.has-sx .piscina:not(.is-in) .piscina__l--b>span{opacity:0;letter-spacing:.72em}
html.has-sx .piscina.is-in .piscina__l--b>span{opacity:1;transition:opacity 1.5s var(--sx-q) .35s,letter-spacing 2.2s var(--sx-e) .35s}

/* ===================== 3 · galeria ===================== */
.galeria{position:relative;z-index:20;background:var(--ink-1);padding:var(--sx-pad) 0 clamp(80px,8vw,140px);color:var(--cream);overflow:hidden}
.galeria__head{padding:0 var(--gutter);text-align:center}
.galeria__h{margin:0;font-weight:400}
.galeria__l{display:block;overflow:hidden;padding:.14em 0 .04em}
.galeria__l>span{display:block;font-size:clamp(25px,3.2vw,58px);line-height:1.16;letter-spacing:.02em;color:var(--cream)}

.galeria__stage{position:relative;margin-top:clamp(44px,4.6vw,84px);height:var(--gh,62vh);outline:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.galeria__track{position:absolute;inset:0}
/* sin will-change: al terminar el movimiento la diapositiva se vuelve a pintar a su escala real (nitida) */
.galeria__slide{position:absolute;left:50%;top:0;margin:0;transform-origin:50% 100%;transition:transform 1.5s var(--sx-e)}
.galeria.is-drag .galeria__slide,.galeria__slide.is-snap{transition:none}
.galeria__frame{position:absolute;inset:0;overflow:hidden;background:var(--tono,var(--ink-2));outline:1px solid transparent;transition:opacity 1.4s var(--sx-q),outline-color .6s var(--sx-q)}
.galeria__slide:not(.is-active) .galeria__frame{opacity:.4}
.galeria__stage:focus-visible .galeria__slide.is-active .galeria__frame{outline-color:var(--sx-beige);outline-offset:6px}
.galeria__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s var(--sx-q)}
.galeria__img:not(.is-ld){opacity:0}
.galeria__slide.is-active{cursor:zoom-in}
/* rotulo de estancia: una linea fina y la estancia en versalitas, bajo la foto */
.galeria__cap{position:absolute;left:0;right:0;top:calc(100% + 20px);margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:10.5px;letter-spacing:.26em;line-height:1.5;color:rgba(242,240,230,.76);opacity:0;transition:opacity .6s var(--sx-q)}
.galeria__cap::before{content:"";display:inline-block;width:22px;height:1px;margin-right:14px;vertical-align:middle;background:var(--sx-beige);opacity:.8;transform:translateY(-.12em)}
.galeria__slide.is-active .galeria__cap{opacity:1;transition:opacity 1.3s var(--sx-q) .5s}

.galeria__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,2.8vw,48px);
  width:min(var(--max),100% - 2 * var(--gutter));margin:clamp(34px,3.4vw,56px) auto 0}
/* contador en Basic: sus cifras son proporcionales, el ancho minimo evita que la barra baile al pasar */
.galeria__count{min-width:4.6em;font-size:clamp(13px,.98vw,15.5px);letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.galeria__count b{font-weight:400;color:var(--cream)}
.galeria__count i{font-style:normal;margin:0 .55em;color:var(--muted-2)}
.galeria__prog{position:relative;height:1px;background:var(--hair)}
.galeria__prog i{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--sx-beige);opacity:.8;transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform 1.5s var(--sx-e)}
.galeria__ctl{display:flex;gap:10px}
.galeria__btn{position:relative;width:48px;height:48px;border:1px solid var(--hair-2);border-radius:50%;color:var(--cream);transition:background-color .7s var(--sx-q),border-color .7s var(--sx-q),color .7s var(--sx-q)}
@media(hover:hover){.galeria__btn:hover{background:var(--cream);border-color:var(--cream);color:var(--ink-1)}}
.galeria__btn:focus-visible{outline:1px solid var(--sx-beige);outline-offset:3px}
.galeria__btn--prev i,.galeria__btn--next i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.galeria__btn--prev i{margin-left:-3px;transform:rotate(-135deg)}
.galeria__btn--full i{position:absolute;width:6px;height:6px;border:0 solid currentColor;transition:transform .9s var(--sx-e)}
.galeria__btn--full i:nth-child(1){left:15px;top:15px;border-top-width:1px;border-left-width:1px}
.galeria__btn--full i:nth-child(2){right:15px;top:15px;border-top-width:1px;border-right-width:1px}
.galeria__btn--full i:nth-child(3){left:15px;bottom:15px;border-bottom-width:1px;border-left-width:1px}
.galeria__btn--full i:nth-child(4){right:15px;bottom:15px;border-bottom-width:1px;border-right-width:1px}
@media(hover:hover){.galeria__btn--full:hover i:nth-child(1){transform:translate(-2px,-2px)}.galeria__btn--full:hover i:nth-child(2){transform:translate(2px,-2px)}.galeria__btn--full:hover i:nth-child(3){transform:translate(-2px,2px)}.galeria__btn--full:hover i:nth-child(4){transform:translate(2px,2px)}}
.galeria:not(.is-ready) .galeria__bar{display:none}
.galeria:not(.is-ready) .galeria__stage{height:0;margin:0}
@media (max-width:767px){
  .galeria__bar{grid-template-columns:auto minmax(0,1fr);row-gap:20px}
  .galeria__prog{order:3;grid-column:1 / -1}
  .galeria__ctl{justify-self:end}
  .galeria__btn{width:44px;height:44px}
  .galeria__btn--full i:nth-child(1),.galeria__btn--full i:nth-child(3){left:13px}
  .galeria__btn--full i:nth-child(2),.galeria__btn--full i:nth-child(4){right:13px}
  .galeria__btn--full i:nth-child(1),.galeria__btn--full i:nth-child(2){top:13px}
  .galeria__btn--full i:nth-child(3),.galeria__btn--full i:nth-child(4){bottom:13px}
  .galeria__slide{transform-origin:50% 50%}
  .galeria__cap{top:calc(100% + 16px);font-size:9.5px;letter-spacing:.22em}
  .galeria__cap::before{width:16px;margin-right:10px}
  .visor__cap{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .visor__cap small{display:block;margin:4px 0 0}
}
/* entrada: el titular sube, las diapositivas llegan despacio de la derecha y la barra se enciende */
html.has-sx .galeria:not(.is-in) .galeria__l>span{transform:translate3d(0,130%,0);opacity:0}
html.has-sx .galeria.is-in .galeria__l>span{transform:none;opacity:1;transition:transform 1.7s var(--sx-e),opacity 1.3s var(--sx-q)}
html.has-sx .galeria .galeria__track{transition:opacity 1.5s var(--sx-q) .2s,transform 1.8s var(--sx-e) .2s}
html.has-sx .galeria:not(.is-in) .galeria__track{opacity:0;transform:translate3d(48px,0,0)}
html.has-sx .galeria .galeria__bar{transition:opacity 1.4s var(--sx-q) .6s}
html.has-sx .galeria:not(.is-in) .galeria__bar{opacity:0}
html.has-sx .galeria:not(.is-in) .galeria__prog i{transform:scaleX(0)}

/* ===================== visor a pantalla completa ===================== */
.visor{position:fixed;inset:0;z-index:260;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;color:var(--cream);visibility:hidden;pointer-events:none}
.visor.is-open{visibility:visible;pointer-events:auto}
.visor__bg{position:absolute;inset:0;background:#0b0f09;opacity:0;transition:opacity 1s var(--sx-q)}
.visor.is-open .visor__bg{opacity:1}
.visor__top,.visor__foot{position:relative;z-index:2;opacity:0;transform:translate3d(0,-8px,0);transition:opacity .8s var(--sx-q),transform 1.2s var(--sx-e)}
.visor__foot{transform:translate3d(0,8px,0)}
.visor.is-open .visor__top,.visor.is-open .visor__foot{opacity:1;transform:none;transition-delay:.3s}
.visor__top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(14px,2vw,24px) var(--gutter)}
.visor__meta{display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);min-width:0}
.visor__count{min-width:4.6em;font-size:14px;letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.visor__count b{font-weight:400;color:var(--cream)}
.visor__cap{display:block;overflow:hidden;font-size:10.5px;letter-spacing:.24em;color:var(--cream);white-space:nowrap;text-overflow:ellipsis}
.visor__cap small{margin-left:14px;font-size:inherit;color:var(--muted)}
.visor__close{position:relative;flex:0 0 auto;width:48px;height:48px;border:1px solid var(--hair-2);border-radius:50%;transition:background-color .7s var(--sx-q),border-color .7s var(--sx-q),color .7s var(--sx-q)}
@media(hover:hover){.visor__close:hover{background:var(--cream);border-color:var(--cream);color:var(--ink-1)}}
.visor__close i{position:absolute;left:50%;top:50%;width:16px;height:1px;margin-left:-8px;background:currentColor;transform:rotate(45deg)}
.visor__close i+i{transform:rotate(-45deg)}
.visor__stage{position:relative;z-index:1;margin:0 var(--gutter);touch-action:none;overflow:visible}
/* sin will-change: al posarse se vuelve a pintar a su tamano, nunca por encima de su ancho real */
.visor__img{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;background:var(--ink-2)}
.visor__img.is-anim{transition:transform 1.3s var(--sx-e),opacity 1s var(--sx-q)}
.visor__arrow{position:absolute;top:50%;z-index:3;width:56px;height:56px;margin-top:-28px;border:1px solid var(--hair-2);border-radius:50%;color:var(--cream);background:rgba(9,13,7,.35);transition:background-color .7s var(--sx-q),border-color .7s var(--sx-q),color .7s var(--sx-q)}
@media(hover:hover){.visor__arrow:hover{background:var(--cream);color:var(--ink-1);border-color:var(--cream)}}
.visor__arrow i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.visor__arrow--prev{left:0}.visor__arrow--next{right:0}
.visor__arrow--prev i{margin-left:-3px;transform:rotate(-135deg)}
.visor__close:focus-visible,.visor__arrow:focus-visible,.visor__th:focus-visible{outline:1px solid var(--sx-beige);outline-offset:3px}
.visor__foot{min-width:0;padding:14px 0 clamp(14px,2vw,22px)}
.visor__strip{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:4px var(--gutter);scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.visor__strip::-webkit-scrollbar{display:none}
.visor__th{position:relative;flex:0 0 auto;height:58px;width:calc(58px * var(--r,1.5));padding:0;overflow:hidden;background:var(--ink-2);opacity:.42;transition:opacity .7s var(--sx-q)}
.visor__th img{width:100%;height:100%;object-fit:cover}
.visor__th.is-on{opacity:1}@media(hover:hover){.visor__th:hover{opacity:1}}
.visor__th.is-on::after{content:"";position:absolute;inset:0;border:1px solid var(--sx-beige)}
.visor__sep{flex:0 0 auto;display:flex;align-items:center;padding:0 10px 0 14px;font-size:9.5px;letter-spacing:.24em;color:var(--muted-2);white-space:nowrap}
.visor__sep:first-child{padding-left:0}
html.visor-open .nav{opacity:0;pointer-events:none}
@media (max-width:767px){
  .visor__arrow{display:none}
  .visor__stage{margin:0}
  .visor__th{height:46px;width:calc(46px * var(--r,1.5))}
  .visor__meta{flex-direction:column;gap:4px}
}

/* ===================== 4 · situacion ===================== */
/* aire arriba: la lista ya no empieza pegada a la barra (el mapa y su animacion, sin tocar) */
.situacion{position:relative;z-index:20;background:var(--ink-1);padding:clamp(104px,9vw,156px) 0 clamp(36px,4vw,72px);color:var(--cream)}
/* la lista a la izquierda y el mapa en su columna, dentro del ancho de la pagina (con margen a la derecha, ya no
   toca el borde); el texto pequeno abajo a la izquierda del bloque. Solo maquetacion: el mapa se anima igual */
.situacion__top{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;column-gap:clamp(36px,5vw,90px);row-gap:clamp(40px,4.4vw,72px);width:min(var(--max),100% - 2 * var(--gutter));margin:0 auto}
.situacion__copy{display:contents}
.situacion__list{grid-column:1;grid-row:1}
.situacion__map{grid-column:2;grid-row:1}
.situacion__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.situacion__row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:clamp(14px,1.3vw,19px) 0;border-bottom:1px solid var(--hair);cursor:default;transition:padding .5s var(--sx-e)}
.situacion__row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--sx-lime);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.9}
.situacion__row::before{content:"";position:absolute;left:-18px;top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:var(--sx-lime);opacity:0;transform:scale(.3);transition:opacity .4s,transform .5s var(--sx-e)}
.situacion__name{font-size:clamp(15px,1.18vw,19px);line-height:1.3;letter-spacing:.01em;color:var(--cream);transition:color .4s}
.situacion__min{flex:0 0 auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.situacion__min b{display:inline-block;min-width:1.25em;text-align:right;font-weight:400;font-size:clamp(15px,1.18vw,19px);letter-spacing:.02em;color:var(--sx-lime);margin-right:.35em}
.situacion__who{grid-column:1;grid-row:2;align-self:end;margin:0;max-width:46ch;font-size:13px;line-height:1.75;color:var(--muted)}
.situacion.has-hi .situacion__row .situacion__name{color:var(--muted)}
.situacion.has-hi .situacion__row.is-hi .situacion__name{color:var(--cream)}
.situacion__row.is-hi::before{opacity:1;transform:none}

.sit-map{position:relative;margin:0;background:var(--sx-green);overflow:hidden}
.sit-map::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px rgba(9,13,7,.35)}
.sit-map__in{position:relative;width:100%;aspect-ratio:1000 / 560}
.sit-map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mp-dots{fill:rgba(242,240,230,.16)}
#mp-dots circle{fill:rgba(242,240,230,.13)}
.mp-ring{fill:none;stroke:rgba(242,240,230,.26);stroke-width:1;stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.mp-rlbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;fill:rgba(242,240,230,.42)}
.mp-a6{fill:none;stroke:rgba(169,188,112,.3);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.mp-a6lbl{font-size:11.5px;letter-spacing:.2em;fill:rgba(169,188,112,.75)}
.mp-route{fill:none;stroke:rgba(242,240,230,.62);stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .4s,opacity .4s,stroke-width .4s}
.mp-pt{fill:var(--sx-green);stroke:var(--cream);stroke-width:1.4;vector-effect:non-scaling-stroke;transition:fill .4s}
.mp-halo{fill:rgba(169,188,112,.16);stroke:none;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.mp-plate{fill:var(--sx-green)}
.mp-br{fill:var(--cream)}
.mp-pulse{fill:none;stroke:var(--sx-lime);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.mp-north path{fill:none;stroke:rgba(242,240,230,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.mp-north text{font-size:11px;letter-spacing:.1em;fill:rgba(242,240,230,.55)}
.mp-comet{fill:var(--cream);opacity:0}
.mp-glow{fill:var(--sx-lime);opacity:0}
.mp-wave{fill:none;stroke:var(--sx-lime);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0}
.mp-ring.is-hit{stroke:rgba(169,188,112,.95);stroke-dasharray:none;transition:stroke .15s,stroke-dasharray 0s!important}
.mp-rlbl.is-hit{fill:var(--sx-lime);transition:fill .15s!important}
html.has-sx .situacion .mp-ring{transition:transform 1.8s var(--sx-e) var(--d,0ms),opacity 1.2s var(--sx-q) var(--d,0ms),stroke 1.4s var(--sx-q)}
html.has-sx .situacion .mp-rlbl{transition:opacity 1s var(--sx-q) var(--d,0ms),fill 1.4s var(--sx-q)}
.mp-flow{fill:var(--sx-lime);opacity:0}
.sit-map__lbls{position:absolute;inset:0;pointer-events:none}
.sit-lbl{position:absolute;display:flex;flex-direction:column;gap:3px;width:max-content;max-width:12em;font-size:10.5px;letter-spacing:.16em;line-height:1.45;text-transform:uppercase;color:rgba(242,240,230,.86);pointer-events:auto}
.sit-lbl b{font-weight:400}
.sit-lbl i{font-style:normal;font-size:13.5px;letter-spacing:.03em;text-transform:none;color:var(--sx-lime);line-height:1.1}
.sit-lbl--r{transform:translate(14px,-50%)}
.sit-lbl--l{transform:translate(calc(-100% - 14px),-50%);text-align:right;align-items:flex-end}
.sit-lbl--t{transform:translate(-50%,calc(-100% - 12px));text-align:center;align-items:center}
.sit-lbl--b{transform:translate(-50%,12px);text-align:center;align-items:center}
.sit-here{position:absolute;transform:translate(0,-50%);font-size:10px;letter-spacing:.2em;padding-left:.3em;color:var(--cream);white-space:nowrap}
.situacion.has-hi .mp-route{opacity:.22}
.situacion.has-hi .mp-route.is-hi{opacity:1;stroke:var(--sx-lime);stroke-width:2}
.situacion.has-hi .sit-lbl{opacity:.4}
.situacion.has-hi .sit-lbl.is-hi{opacity:1}
.situacion .sit-lbl{transition:opacity .4s}
.mp-dest.is-hi .mp-pt{fill:var(--sx-lime)}

.situacion__credits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(var(--max),100% - 2 * var(--gutter));margin:clamp(70px,8vw,130px) auto 0;border-top:1px solid var(--hair)}
.credito{display:flex;flex-direction:column;gap:clamp(16px,1.6vw,24px);padding:clamp(28px,3vw,44px) clamp(14px,2vw,30px) clamp(34px,3.6vw,54px) 0}
.credito+.credito{padding-left:clamp(18px,2.6vw,40px);border-left:1px solid var(--hair)}
.credito__k{margin:0;font-size:10.5px;letter-spacing:.28em;color:var(--sx-beige)}
.credito__v{color:var(--cream);height:clamp(26px,2.5vw,38px);display:flex;align-items:center}
.credito__svg{display:block;height:100%;width:auto;max-width:100%}
.credito__v--portland .credito__svg{height:66%}
.credito__v--frutos .credito__svg{height:92%}
.credito__v--slate .credito__svg{height:100%}
@media (max-width:940px){
  .situacion__top{grid-template-columns:1fr;row-gap:0}
  .situacion__map{grid-column:1;grid-row:1}
  .situacion__list{grid-row:2;margin-top:clamp(36px,5vw,90px)}
  .situacion__who{grid-row:3;margin-top:clamp(26px,3vw,44px)}
}
@media (max-width:599px){
  .sit-map{margin:0 calc(var(--gutter) * -1)}
}
@media (max-width:767px){
  .situacion__credits{grid-template-columns:1fr}
  .credito+.credito{padding-left:0;border-left:0;border-top:1px solid var(--hair)}
  .credito{flex-direction:row;align-items:center;justify-content:space-between;padding:22px 0}
  .credito__v{height:30px}
  .sit-lbl b{display:none}
  .sit-lbl{max-width:none}
  .sit-lbl i{font-size:12.5px}
  .mp-rlbl,.mp-a6lbl{display:none}
  .sit-here{font-size:8.5px;letter-spacing:.16em}
}

/* motion graphic (lo arranca secciones.js): isocronas que se abren, la A-6 que se traza, la marca que
   se abre en el centro y el pulso; los recorridos, sus puntos y la lista los mueve el script */
html.has-sx .situacion:not(.is-in) .mp-base,html.has-sx .situacion:not(.is-in) .mp-rlbl,html.has-sx .situacion:not(.is-in) .mp-north{opacity:0}
html.has-sx .situacion .mp-base{transition:opacity 1.2s var(--sx-q)}
html.has-sx .situacion .mp-ring{transform-box:view-box;transform-origin:var(--cx) var(--cy);transition:transform 1.8s var(--sx-e) var(--d,0ms),opacity 1.2s var(--sx-q) var(--d,0ms)}
html.has-sx .situacion:not(.is-in) .mp-ring{transform:scale(.5);opacity:0}
html.has-sx .situacion .mp-rlbl{transition:opacity 1s var(--sx-q) var(--d,0ms)}
html.has-sx .situacion .mp-north{transition:opacity 1s var(--sx-q) 1.2s}
html.has-sx .situacion .mp-a6{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset 1.9s var(--sx-lift) .25s}
html.has-sx .situacion.is-in .mp-a6{stroke-dashoffset:0}
html.has-sx .situacion:not(.is-in) .mp-a6lbl{opacity:0}
html.has-sx .situacion .mp-a6lbl{transition:opacity 1s var(--sx-q) 1.4s}
html.has-sx .situacion:not(.is-in) .mp-plate{transform:scale(0)}
html.has-sx .situacion .mp-plate{transform-box:fill-box;transform-origin:50% 50%;transition:transform 1.1s var(--sx-e) .55s}
html.has-sx .situacion .mp-br{transition:transform 1.3s var(--sx-e) .75s,opacity .8s var(--sx-q) .7s}
html.has-sx .situacion:not(.is-in) .mp-br{opacity:0}
html.has-sx .situacion:not(.is-in) .mp-br--l{transform:translateX(34px)}
html.has-sx .situacion:not(.is-in) .mp-br--r{transform:translateX(-34px)}
html.has-sx .situacion:not(.is-in) .sit-here{opacity:0;letter-spacing:.7em}
html.has-sx .situacion .sit-here{transition:opacity 1s var(--sx-q) 1.1s,letter-spacing 1.6s var(--sx-e) 1.1s}
html.has-sx .situacion.is-live .mp-pulse{animation:sx-pulse 3.2s var(--sx-q) infinite}
html.has-sx .situacion.is-live .mp-pulse--b{animation-delay:1.6s}
html.has-sx .situacion.is-live:not(.is-vis) .mp-pulse{animation-play-state:paused}
@keyframes sx-pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.1)}}
/* destinos y rotulos: aparecen al llegar su recorrido (.is-on) */
html.has-sx .situacion.is-armed .mp-dest:not(.is-on) .mp-pt{transform:scale(0)}
html.has-sx .situacion .mp-pt{transform-box:fill-box;transform-origin:50% 50%;transition:transform .9s var(--sx-e),fill .4s}
html.has-sx .situacion .mp-dest.is-on .mp-halo{animation:sx-halo 1.4s var(--sx-q) both}
@keyframes sx-halo{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2.6)}}
html.has-sx .situacion.is-armed .sit-lbl:not(.is-on){opacity:0;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
html.has-sx .situacion.is-armed .sit-lbl--l:not(.is-on){clip-path:inset(0 0 0 100%)}
html.has-sx .situacion.is-armed .sit-lbl--t:not(.is-on),html.has-sx .situacion.is-armed .sit-lbl--b:not(.is-on){clip-path:inset(0 50% 0 50%)}
html.has-sx .situacion .sit-lbl{transition:opacity .6s var(--sx-q),clip-path 1.1s var(--sx-e)}
html.has-sx .situacion.is-armed .situacion__row:not(.is-on) .situacion__name{color:var(--muted)}
html.has-sx .situacion .situacion__name{transition:color .8s var(--sx-q)}
html.has-sx .situacion.is-armed .situacion__row{--p:0}
html.has-sx .situacion.is-live .situacion__row::after{opacity:0;transition:opacity 1.6s var(--sx-q) .4s}
/* creditos: hairline que se dibuja, rotulo y logotipo que se barren */
html.has-sx .situacion__credits{border-top-color:transparent;position:relative}
html.has-sx .situacion__credits::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--hair);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--sx-lift)}
html.has-sx .situacion__credits.is-in::before{transform:none}
html.has-sx .situacion__credits:not(.is-in) .credito__k,html.has-sx .situacion__credits:not(.is-in) .credito__v{opacity:0;clip-path:inset(0 100% 0 0)}
html.has-sx .situacion__credits .credito__k,html.has-sx .situacion__credits .credito__v{transition:opacity .9s var(--sx-q) var(--d,0ms),clip-path 1.4s var(--sx-e) var(--d,0ms)}
html.has-sx .situacion__credits .credito__v{--d:calc(var(--dd,0ms) + 160ms)}

/* ===================== 5 · contacto (marfil) ===================== */
/* composicion editorial: titular con su hairline, la foto a la izquierda respirando y el formulario a
   la derecha con etiquetas flotantes y un subrayado fino de laton al enfocar. La sombra solida de abajo
   solo se ve si el navegador rebota al final: el marfil sigue, no asoma el verde. */
.contacto{position:relative;z-index:20;background:var(--sx-ivory);color:var(--sx-ink);padding-top:var(--sx-pad);box-shadow:0 70vh 0 var(--sx-ivory)}
.contacto__in{width:min(var(--max),100% - 2 * var(--gutter));margin:0 auto}
.contacto__head{position:relative;padding-bottom:clamp(26px,2.8vw,46px);border-bottom:1px solid var(--sx-hl)}
.contacto__h{margin:0;font-size:clamp(34px,5.2vw,90px);line-height:1.08;letter-spacing:.02em;color:var(--sx-ink)}
.contacto__hl{display:block;overflow:hidden;padding:.14em 0 .04em;margin:-.14em 0 -.04em}
.contacto__hl>span{display:block}
.contacto__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6.4vw,124px);margin-top:clamp(48px,5.2vw,92px)}
.contacto__fig{position:relative;margin:0;aspect-ratio:4 / 5;overflow:hidden;background:var(--sx-stone)}
.contacto__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contacto__form{position:relative;align-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,3.4vw,54px) clamp(26px,3vw,48px);align-content:start}
.campo{position:relative;display:block;padding-top:24px}
.campo--full{grid-column:1 / -1}
.campo__in{display:block;width:100%;margin:0;padding:10px 0 13px;border:0;border-radius:0;background:transparent;color:var(--sx-ink);font-family:var(--font-body);font-size:clamp(17px,1.25vw,20px);font-weight:400;letter-spacing:.01em;line-height:1.4;outline:none;box-shadow:none;-webkit-appearance:none;appearance:none}
.campo__in--ta{min-height:100px;resize:none;overflow:hidden;line-height:1.5}
.campo__in:-webkit-autofill{-webkit-text-fill-color:var(--sx-ink);-webkit-box-shadow:0 0 0 60px var(--sx-ivory) inset;transition:background-color 99999s 0s}
.campo__lb{position:absolute;left:0;top:37px;font-size:11px;letter-spacing:.28em;color:var(--sx-ink-2);transform-origin:0 0;pointer-events:none;
  transition:transform 1s var(--sx-e),color .6s var(--sx-q),letter-spacing 1s var(--sx-e)}
.campo__in:focus+.campo__lb,.campo__in:not(:placeholder-shown)+.campo__lb{transform:translate3d(0,-32px,0) scale(.9);color:var(--sx-brass-t);letter-spacing:.32em}
.campo__in:not(:focus):not(:placeholder-shown)+.campo__lb{color:var(--sx-ink-2)}
.campo__ln{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(29,39,24,.5)}
.campo__ln::after{content:"";position:absolute;inset:0;background:var(--sx-brass-t);transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.2s var(--sx-e)}
.campo:focus-within .campo__ln::after{transform:none;transform-origin:0 50%}
.campo__err{position:absolute;right:0;top:4px;font-style:normal;font-size:10px;letter-spacing:.22em;color:#94573a;opacity:0;transition:opacity .6s var(--sx-q)}
.campo.is-err .campo__err{opacity:1}
.campo.is-err .campo__ln{background:rgba(148,87,58,.55)}
.contacto__send{grid-column:1 / -1;display:flex;justify-content:flex-start;margin-top:clamp(6px,1vw,16px)}
.contacto__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:22px;flex:0 0 auto;min-width:min(100%,232px);max-width:100%;height:58px;padding:0 34px 0 38px;
  border:1px solid var(--sx-ink);border-radius:999px;background:transparent;color:var(--sx-ink);font-size:11px;letter-spacing:.34em;white-space:nowrap;
  transition:background-color .8s var(--sx-q),color .8s var(--sx-q),border-color .8s var(--sx-q)}
.contacto__btn:focus-visible{background:var(--sx-ink);color:var(--sx-ivory)}@media(hover:hover){.contacto__btn:hover{background:var(--sx-ink);color:var(--sx-ivory)}}
.contacto__btn:focus-visible{outline:1px solid var(--sx-brass);outline-offset:4px}
.contacto__arrow{position:relative;flex:0 0 auto;width:22px;height:1px;background:currentColor;transition:transform 1s var(--sx-e)}
.contacto__arrow::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
@media(hover:hover){.contacto__btn:hover .contacto__arrow{transform:translateX(4px)}}
.contacto__btn.is-busy{pointer-events:none}
.contacto__ok{grid-column:1 / -1;margin:0;min-height:0;font-size:clamp(19px,1.75vw,28px);line-height:1.25;letter-spacing:.03em;color:var(--sx-ink)}
.contacto__ok small{display:block;margin-top:14px;font-size:10.5px;letter-spacing:.28em;color:var(--sx-brass-t)}
.contacto__form.is-sent .campo,.contacto__form.is-sent .contacto__send{opacity:0;transform:translate3d(0,-10px,0);pointer-events:none;transition:opacity .9s var(--sx-q) var(--d,0ms),transform 1.3s var(--sx-e) var(--d,0ms)}
.contacto__form.is-sent .contacto__ok{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.contacto__ok:empty{display:none}
.contacto__ok .l{display:block;overflow:hidden}
.contacto__ok span.l{padding-top:.14em;margin-top:-.14em}
.contacto__ok .l>span{display:block;animation:sx-up 1.6s var(--sx-e) both}
.contacto__ok small.l>span{animation-delay:.18s}
@keyframes sx-up{from{transform:translate3d(0,110%,0)}to{transform:none}}
.contacto__base{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(var(--max),100% - 2 * var(--gutter));margin:clamp(96px,10vw,170px) auto 0;padding:28px 0 34px;border-top:1px solid var(--sx-hl);font-size:10.5px;letter-spacing:.26em}
.contacto__copy{margin:0;color:var(--sx-ink-2)}
.contacto__gp{display:inline-flex;align-items:center;gap:14px;color:var(--sx-ink);padding:6px 0}
.contacto__gp span{position:relative}
.contacto__gp span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--sx-brass);transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.1s var(--sx-e)}
.contacto__gp:focus-visible span::after{transform:none;transform-origin:0 50%}@media(hover:hover){.contacto__gp:hover span::after{transform:none;transform-origin:0 50%}}
.contacto__gp:focus-visible{outline:1px solid var(--sx-brass);outline-offset:4px}
.contacto__gp i{position:relative;width:9px;height:9px;border-top:1px solid currentColor;border-right:1px solid currentColor;transition:transform 1s var(--sx-e)}
.contacto__gp i::after{content:"";position:absolute;right:-1px;top:-1px;width:12px;height:1px;background:currentColor;transform-origin:100% 50%;transform:rotate(-45deg)}
@media(hover:hover){.contacto__gp:hover i{transform:translate(2px,-2px)}}
@media (max-width:860px){
  .contacto__body{grid-template-columns:1fr}
  .contacto__fig{aspect-ratio:4 / 3}
}
@media (max-width:599px){
  .contacto__form{grid-template-columns:1fr;row-gap:24px}
  .contacto__btn{width:100%}
  .contacto__base{flex-direction:column-reverse;align-items:flex-start;gap:14px}
}
/* entrada: el titular sube entero, su hairline se dibuja, la foto se abre y las lineas de los campos se
   escriben con poco escalonado; el boton llega el ultimo, solo con su opacidad */
html.has-sx .contacto:not(.is-in) .contacto__hl>span{transform:translate3d(0,130%,0);opacity:0}
html.has-sx .contacto.is-in .contacto__hl>span{transform:none;opacity:1;transition:transform 1.7s var(--sx-e),opacity 1.3s var(--sx-q)}
html.has-sx .contacto__head{border-bottom-color:transparent}
html.has-sx .contacto__head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--sx-hl);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.8s var(--sx-lift) .3s}
html.has-sx .contacto.is-in .contacto__head::after{transform:none}
html.has-sx .contacto .campo__ln{transform-origin:0 50%;transition:transform 1.6s var(--sx-lift) var(--d,0ms)}
html.has-sx .contacto:not(.is-in) .campo__ln{transform:scaleX(0)}
html.has-sx .contacto .campo__lb{transition:transform 1s var(--sx-e),color .6s var(--sx-q),letter-spacing 1s var(--sx-e),opacity 1.2s var(--sx-q) calc(var(--d,0ms) + 200ms)}
html.has-sx .contacto:not(.is-in) .campo__lb{opacity:0}
html.has-sx .contacto .contacto__btn{transition:background-color .8s var(--sx-q),color .8s var(--sx-q),border-color .8s var(--sx-q),opacity 1.4s var(--sx-q) 1s}
html.has-sx .contacto:not(.is-in) .contacto__btn{opacity:0}

/* ===================== movimiento reducido: fundidos cortos y nada que se desplace ===================== */
html.sx-reduced .mosaico__l>span,html.sx-reduced .piscina__l>span,html.sx-reduced .galeria__l>span,html.sx-reduced .contacto__hl>span{transform:none!important;letter-spacing:inherit!important}
html.sx-reduced .mosaico:not(.is-in) .mosaico__h,html.sx-reduced .piscina:not(.is-in) .piscina__h,html.sx-reduced .galeria:not(.is-in) .galeria__h,html.sx-reduced .contacto:not(.is-in) .contacto__h{opacity:0}
html.sx-reduced .mosaico__h,html.sx-reduced .piscina__h,html.sx-reduced .galeria__h,html.sx-reduced .contacto__h{transition:opacity .7s ease}
html.sx-reduced .mosaico__l>span,html.sx-reduced .piscina__l>span,html.sx-reduced .galeria__l>span,html.sx-reduced .contacto__hl>span{opacity:1!important}
html.sx-reduced .sx-open{clip-path:none!important;transition:opacity .8s ease!important}
html.sx-reduced .sx-open img{transform:none!important}
html.sx-reduced .galeria__track,html.sx-reduced .galeria__bar{transform:none!important}
html.sx-reduced .galeria__slide{transition:none!important}
html.sx-reduced .galeria__frame,html.sx-reduced .galeria__img,html.sx-reduced .galeria__cap{transition:opacity .4s ease!important}
html.sx-reduced .visor__img.is-anim{transition:opacity .35s ease!important}
html.sx-reduced .mp-ring{transform:none!important}
html.sx-reduced .mp-br,html.sx-reduced .mp-plate{transform:none!important}
html.sx-reduced .mp-a6{stroke-dasharray:none!important}
html.sx-reduced .situacion__credits .credito__k,html.sx-reduced .situacion__credits .credito__v,html.sx-reduced .sit-lbl{clip-path:none!important}
html.sx-reduced .contacto .campo__ln{transform:none!important}
html.sx-reduced .contacto__head::after{transform:none!important}

/* modo verificacion: nada de bucles */
.is-debug .mp-pulse,.is-debug .mp-halo{animation:none!important;opacity:0}

/* ===================== movil y tableta (01/10/2026) ===================== */
/* Revision antes de subir, sin cambiar el diseno: el visor se aparta de la barra de estado y de la de inicio
   (zona segura, viewport-fit=cover; --sat y --sab estan en gobelas.css), las zonas de toque llegan a 44 px
   (un ::after transparente o un ancho minimo) y los rotulos que en movil bajaban de 10 px suben a 10,5. */
.visor__top{padding-top:calc(clamp(14px,2vw,24px) + var(--sat,0px))}
.visor__foot{padding-bottom:calc(clamp(14px,2vw,22px) + var(--sab,0px))}
.is-touch .visor__th{min-width:44px}
.is-touch .visor__sep{font-size:10.5px}
.contacto__gp{position:relative}
.is-touch .contacto__gp::after{content:"";position:absolute;inset:-9px -6px}
@media (max-width:767px){
  .galeria__cap{font-size:10.5px;letter-spacing:.22em}
}
/* horizontal de movil (poco alto): el visor recoge su barra y su tira para que la foto gane alto */
@media (orientation:landscape) and (max-height:540px){
  .visor__top{padding-top:calc(8px + var(--sat,0px));padding-bottom:2px}
  .visor__close{width:44px;height:44px}
  .visor__foot{padding-top:6px;padding-bottom:calc(8px + var(--sab,0px))}
  .visor__th{height:44px;width:calc(44px * var(--r,1.5))}
}

/* formulario real: trampa para robots (fuera de pantalla) y aviso si el envio falla */
.ct-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.contacto__ok.is-err{font-family:"Basic",system-ui,sans-serif;text-transform:none;font-size:14px;letter-spacing:.02em;line-height:1.5;color:#7a3f2e;margin-top:18px}

/* =====================================================================
   AUDITORIA MOVIL (15/10/2026) · fichas sin cambio de diseno
   ===================================================================== */
/* M11: asterisco de los obligatorios (el lector ya anuncia el required) */
.campo__req{font-style:normal;margin-left:.25em}
/* B18: en tableta, los minutos de los anillos del mapa a un cuerpo legible (unos 10 px en el iPad Air);
   solo tamano, ninguna animacion del mapa cambia */
@media (min-width:768px) and (max-width:1280px){.mp-rlbl,.mp-a6lbl{font-size:16px}}
/* B13 y B14: horizontal de movil. Los aires se calculaban por ancho y entre bloques quedaba mas de media
   pantalla vacia; el mapa y la foto de la piscina no cabian enteros en 343 px de alto */
@media (orientation:landscape) and (max-height:540px){
  :root{--sx-pad:clamp(56px,17svh,104px)}
  .galeria{padding-bottom:clamp(40px,12svh,80px)}
  .situacion{padding-top:clamp(56px,16svh,104px)}
  .situacion__credits{margin-top:clamp(40px,12svh,70px)}
  .contacto__base{margin-top:clamp(48px,14svh,96px)}
  .situacion__map{width:min(100%,calc((100svh - 48px) * 1000 / 560));margin-inline:auto}
  .piscina__fig{width:min(86vw,calc(86svh * 2560 / 1519))}
}

/* =====================================================================
   DECISIONES APROBADAS (15/10/2026, auditoria movil)
   ===================================================================== */
/* M10: en movil el formulario va antes que la foto de los pinos (CONTACTANOS llega al formulario); en
   horizontal de movil, foto y formulario en dos columnas como en escritorio */
@media (max-width:860px){.contacto__fig{order:2}}
@media (max-width:860px) and (orientation:landscape) and (max-height:540px){
  .contacto__body{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .contacto__fig{order:0;aspect-ratio:4/5;max-height:80svh}
}

/* S7 (16/10): el mapa del dossier como base. La imagen va debajo del SVG, en el mismo marco 1000x560;
   los recorridos van por carretera y se leen mas sobre las vias claras; los barrios, en el beige del dossier */
.sit-map{background:#414f35}
.sit-map__img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.mp-route{stroke:rgba(242,240,230,.82);stroke-width:1.6}
.mp-a6{stroke:rgba(169,188,112,.42);stroke-width:5}
.sit-zona{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-display);font-weight:400;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(212,188,152,.72);white-space:nowrap;pointer-events:none}
.sit-lbl--tl{transform:translate(calc(-100% + 6px),calc(-100% - 12px));text-align:right;align-items:flex-end}
.sit-lbl--bl{transform:translate(-10px,12px);text-align:left;align-items:flex-start}
.sit-lbl--estrecho{max-width:7em}
html.has-sx .situacion:not(.is-in) .sit-map__img,html.has-sx .situacion:not(.is-in) .sit-zona{opacity:0}
html.has-sx .situacion .sit-map__img{transition:opacity 1.2s var(--sx-q)}
html.has-sx .situacion .sit-zona{transition:opacity 1.2s var(--sx-q) .5s}
html.has-sx .situacion.is-armed .sit-lbl--tl:not(.is-on){clip-path:inset(0 0 0 100%)}
html.has-sx .situacion.is-armed .sit-lbl--bl:not(.is-on){clip-path:inset(0 100% 0 0)}
@media (max-width:767px){
  .sit-zona{display:none}
  .sit-lbl--m-br{transform:translate(calc(-100% + 6px),10px);text-align:right;align-items:flex-end}
  html.has-sx .situacion.is-armed .sit-lbl--m-br:not(.is-on){clip-path:inset(0 0 0 100%)}
}

/* S4 (16/10): en vertical el bloque Casa Gobelas acaba en el verde oscuro de las copas (--copa, gobelas.css) y la
   piscina lo recoge con un degradado hacia el marfil antes del titular, en vez del corte seco */
@media (max-aspect-ratio:19/20){
  .piscina{padding-top:calc(var(--sx-pad) + 30svh)}
  .piscina::before{content:"";position:absolute;left:0;right:0;top:-1px;height:calc(36svh + 1px);pointer-events:none;
    background:linear-gradient(to bottom,var(--copa,#1b1f12) 0%,rgba(27,31,18,.94) 12%,rgba(27,31,18,.8) 24%,rgba(27,31,18,.6) 38%,rgba(27,31,18,.38) 53%,rgba(27,31,18,.19) 69%,rgba(27,31,18,.06) 85%,rgba(27,31,18,0) 100%)}
}

/* S3 (16/10, segunda vuelta, eleccion de Adri en el probador): en movil el mosaico es escalonado, dos columnas de
   fotos casi cuadradas con la derecha media pieza mas abajo. Entre las fotos hay dos huecos de media pieza con texto:
   LA FLORIDA ARAVACA en la izquierda (tras dos fotos) y la marca con CASA GOBELAS en la derecha (tras tres). Sin
   junta de rejilla: la junta fina (3 px) la da cada foto metida 1,5 px en su casilla, asi secciones.js sigue viendo
   vecinas las casillas que se tocan. Tableta y horizontal (600 px o mas) siguen con la 3x3 de escritorio */
.mosaico__cell--n{display:none}
.mosaico__n{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--font-display);font-weight:400;font-size:13px;line-height:1.5;letter-spacing:.2em;padding-left:.2em;color:var(--cream)}
.mosaico__mk{display:block;height:24px;width:auto;fill:currentColor}
@media (max-width:599px){
  .mosaico__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:26vw}
  .mosaico__cell{aspect-ratio:auto}
  .mosaico__t{inset:1.5px}
  .mosaico__cell--n{display:block}
  .mosaico__grid>:nth-child(1){grid-column:1;grid-row:1 / 3}
  .mosaico__grid>:nth-child(3){grid-column:1;grid-row:3 / 5}
  .mosaico__grid>.mosaico__cell--c{grid-column:1;grid-row:5 / 6}
  .mosaico__grid>:nth-child(6){grid-column:1;grid-row:6 / 8}
  .mosaico__grid>:nth-child(8){grid-column:1;grid-row:8 / 10}
  .mosaico__grid>:nth-child(2){grid-column:2;grid-row:2 / 4}
  .mosaico__grid>:nth-child(4){grid-column:2;grid-row:4 / 6}
  .mosaico__grid>:nth-child(7){grid-column:2;grid-row:6 / 8}
  .mosaico__grid>.mosaico__cell--n{grid-column:2;grid-row:8 / 9}
  .mosaico__grid>:nth-child(9){grid-column:2;grid-row:9 / 11}
  .mosaico__h{font-size:15px}
}
/* el nombre entra con su propio gesto cuando su hueco se ve, no con el rotulo de La Florida (va mas abajo) */
html.has-sx .mosaico .mosaico__cell--n:not(.is-in) .mosaico__l>span{transform:translate3d(0,105%,0);letter-spacing:.34em;opacity:0}
html.has-sx .mosaico .mosaico__cell--n:not(.is-in) .mosaico__mk{opacity:0;transform:scale(.86)}
html.has-sx .mosaico .mosaico__mk{transition:opacity 1.2s var(--sx-q),transform 1.6s var(--sx-e)}
html.has-sx .mosaico .mosaico__cell--n.is-in .mosaico__l>span{transition-delay:.2s}
html.sx-reduced .mosaico__mk{transform:none!important}