/* Identidad común de ADCORE by Gianfranca Addis (portada y secciones): barra con monograma, entrada, botones, menú móvil y transición entre páginas */
:root{--fondo:#F8EFE6;--papel:#FCFAF6;--tinta:#17120E;--oro:#A6824D;--oro-claro:#C9A86C;--gris:#6B6560;--linea:#E2DACC;
  --curva:cubic-bezier(.7,0,.15,1);--sale:cubic-bezier(.2,.8,.2,1);--g:clamp(18px,3.4vw,48px)}

/* entrada: monograma, contador y cortina */
.intro{position:fixed;inset:0;z-index:60;background:var(--papel);display:grid;place-items:center;transition:transform 1.1s var(--curva)}
.intro.fuera{transform:translateY(-100%)}
.intro .centro{display:flex;flex-direction:column;align-items:center;gap:22px;transition:opacity .4s ease}
.intro.fuera .centro{opacity:0}
.intro img{width:min(300px,68vw);height:auto;object-fit:contain;opacity:0;transform:translateY(8px);animation:aparece .9s .1s var(--sale) forwards}
.intro .barra{width:150px;height:1px;background:var(--linea);position:relative;overflow:hidden}
.intro .barra i{position:absolute;inset:0;background:var(--oro);transform-origin:left;transform:scaleX(0)}
.intro .num{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.38em;color:var(--gris);font-variant-numeric:tabular-nums}
.intro .titulo{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--tinta)}
@keyframes aparece{to{opacity:1;transform:none}}

/* cortina de salida al cambiar de página */
.cortina{position:fixed;inset:0;z-index:70;background:var(--papel);transform:translateY(100%);transition:transform .55s cubic-bezier(.45,0,.25,1);display:grid;place-items:center;pointer-events:none}
.cortina img{width:min(300px,68vw);height:auto;object-fit:contain;opacity:0;transition:opacity .3s ease .22s}
.cortina.si{transform:none}.cortina.si img{opacity:1}

/* barra: enlaces a la izquierda, monograma en el centro, contacto a la derecha */
/* ADCORE: el logo a la izquierda, el menú en el centro y el contacto a la derecha (con «Sardinia Property Concierge» no cabe el logo en medio) */
body .nav{grid-template-columns:auto 1fr auto;grid-template-areas:"mono menu dcha";column-gap:clamp(20px,3vw,48px)}
body .nav ul{grid-area:menu;justify-self:center}
body .nav .mono{grid-area:mono;justify-self:start}
body .nav .dcha{grid-area:dcha}
body .nav .hamb{grid-area:hamb}
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px var(--g);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-10px);transition:opacity .8s ease,transform .8s var(--sale),color .4s ease,background .4s ease,padding .4s ease}
.listo .nav{opacity:1;transform:none;transition-delay:.4s,.4s,0s,0s,0s}
.nav ul{list-style:none;display:flex;gap:clamp(14px,1.9vw,34px)}
.nav li a{white-space:nowrap;font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;position:relative;padding:4px 0}
.nav li a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--sale)}
.nav li a:hover::after,.nav li a.actual::after{transform:scaleX(1);transform-origin:left}
@media (max-width:1180px){.nav li a{letter-spacing:.18em;font-size:10px}}
.nav .mono{justify-self:center}
.nav .mono img{width:clamp(112px,9.5vw,148px);height:auto;display:block;filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.5));transition:filter .4s ease}
.nav .dcha{justify-self:end;display:flex;align-items:center;gap:22px}
/* sobre las secciones claras la barra pasa a tinta con fondo marfil */
.nav.clara{color:var(--tinta);text-shadow:none;background:rgba(248,239,230,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding-top:14px;padding-bottom:14px}
.nav.clara .mono img{filter:none}
.nav.clara .boton.claro{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

/* botones */
.boton{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  padding:14px 26px;border:1.5px solid currentColor;position:relative;overflow:hidden;z-index:0;transition:color .5s var(--sale)}
.boton::before{content:'';position:absolute;inset:0;background:var(--tinta);transform:translateY(101%);transition:transform .5s var(--sale);z-index:-1}
.boton:hover{color:var(--papel)}.boton:hover::before{transform:none}
.boton.blanco{color:#fff}.boton.blanco::before{background:var(--papel)}.boton.blanco:hover{color:var(--tinta);text-shadow:none}
.boton.peq{padding:10px 18px;font-size:10px}
.boton.claro{background:var(--papel);color:var(--tinta);border-color:var(--papel);text-shadow:none}
.boton .flecha{width:18px;height:1px;background:currentColor;position:relative;transition:width .4s var(--sale)}
.boton .flecha::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.boton:hover .flecha{width:26px}

/* etiqueta con raya (la de la portada) */
.ante{font-size:11.5px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--oro);display:flex;align-items:center;gap:14px}
.ante::before{content:'';width:34px;height:1px;background:currentColor}

/* menú móvil */
.hamb{display:none;width:26px;height:12px;position:relative;background:none;border:0;cursor:pointer;color:inherit}
.hamb::before,.hamb::after{content:'';position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--sale)}
.hamb::before{top:0}.hamb::after{bottom:0}
.menu-movil{position:fixed;inset:0;z-index:55;background:var(--fondo);display:flex;flex-direction:column;justify-content:center;gap:26px;padding:0 28px;
  transform:translateY(-100%);transition:transform .8s var(--curva)}
.menu-movil.si{transform:none}
.menu-movil a{font-family:'Playfair Display',serif;font-size:34px;color:var(--tinta)}
.menu-movil .cerrar{position:absolute;top:22px;right:22px;background:none;border:0;font-size:28px;color:var(--tinta);cursor:pointer}
@media (max-width:820px){
  .nav{grid-template-columns:auto 1fr auto;padding:18px}
  body .nav{grid-template-areas:"hamb mono dcha"}
  body .nav .mono{justify-self:center}
  .nav ul,.nav .dcha .boton{display:none}
  .hamb{display:block}
  .nav .mono img{width:110px}
  .nav.clara{background:var(--fondo)}
}

@media (max-width:380px){.boton{letter-spacing:.2em;padding:13px 20px;white-space:nowrap;font-size:10.5px}}
@media (max-width:340px){.boton{white-space:normal;letter-spacing:.16em;padding:13px 16px;text-align:left;max-width:100%}}

/* «Reducir movimiento» activado (como en el iPhone de Esteban): nada de saltos; lo que se desliza pasa a fundirse suave */
@media (prefers-reduced-motion:reduce){
  .intro{transition:opacity .8s ease}.intro.fuera{transform:none;opacity:0;pointer-events:none}
  .cortina{transform:none;opacity:0;transition:opacity .5s ease}.cortina.si{opacity:1}
  .menu-movil{transform:none;opacity:0;pointer-events:none;transition:opacity .45s ease}.menu-movil.si{opacity:1;pointer-events:auto}
}
/* en el móvil la barra no difumina lo de detrás (es caro al hacer scroll) */
@media (max-width:820px){.nav.clara{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* llegada desde otra página del sitio: la cortina ya estaba cerrada con el GA en el centro; se funde y la página aparece, sin segunda cortina */
.llega .intro{transition:opacity .6s cubic-bezier(.33,0,.2,1);will-change:opacity}
.llega .intro.fuera{transform:none;opacity:0;pointer-events:none}
.llega .intro .centro,.llega .intro.fuera .centro{opacity:1;transition:none}
.llega .intro .titulo,.llega .intro .barra,.llega .intro .num{display:none}
/* al llegar desde otra página, el logo ya está quieto en su sitio desde el primer fotograma (sin aparecer ni moverse) */
.llega .intro img{animation:none!important;opacity:1!important;transform:none!important}
/* el hueco de la barra de scroll siempre reservado: el centro de la pantalla no se desplaza al cambiar de página */
html{scrollbar-gutter:stable}
.llega .foto::after{display:none}

/* el navegador encadena las dos pantallas del GA sin pintar nada entre medias */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s;animation-timing-function:ease}

/* selector de idioma: en la barra (ordenador) y en el menú (móvil) */
.nav .idiomas{display:flex;gap:12px;font-size:10px;font-weight:500;letter-spacing:.2em}
.idiomas a{opacity:.55;transition:opacity .3s ease;padding-bottom:2px}
.idiomas a:hover,.idiomas a.actual{opacity:1}
.idiomas a.actual{border-bottom:1px solid currentColor}
.menu-movil .idiomas{display:flex;gap:20px;margin-top:clamp(14px,3svh,26px)}
.menu-movil .idiomas a{font-family:'Jost',sans-serif;font-size:13px;font-weight:500;letter-spacing:.24em;color:var(--tinta)}
@media (max-width:820px){.nav .idiomas{display:none}}

/* panel de contacto (lo abren los botones «Arrange a consultation») */
.ct{position:fixed;inset:0;z-index:65;display:grid;place-items:center;pointer-events:none}
.ct.si{pointer-events:auto}
.ct-fondo{position:absolute;inset:0;background:rgba(23,18,14,.42);opacity:0;transition:opacity .5s ease}
.ct.si .ct-fondo{opacity:1}
.ct-caja{position:relative;width:min(560px,calc(100vw - 2*var(--g)));background:var(--papel);color:var(--tinta);padding:clamp(34px,4.4vw,56px);
  opacity:0;transform:translateY(26px);transition:opacity .45s ease,transform .7s var(--sale)}
.ct.si .ct-caja{opacity:1;transform:none}
.ct-ante{display:block;font-size:10px;font-weight:500;letter-spacing:.36em;color:var(--oro)}
.ct-caja h2{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(30px,3.4vw,42px);line-height:1.08;margin:16px 0 14px}
.ct-caja p{font-size:15px;line-height:1.65;color:var(--gris);max-width:30em}
.ct-filas{margin-top:clamp(24px,3vw,34px);border-top:1px solid var(--linea)}
.ct-fila{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:14px;padding:19px 0;border-bottom:1px solid var(--linea);transition:padding .4s var(--sale),color .3s ease}
.ct-fila:hover,.ct-fila:focus-visible{padding-left:10px;color:var(--oro);outline:none}
.ct-et{font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.ct-val{font-size:15px;overflow-wrap:anywhere}
.ct-fila .flecha{width:18px;height:1px;background:currentColor;position:relative}
.ct-fila .flecha::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.ct-x{position:absolute;top:16px;right:16px;width:40px;height:40px;background:none;border:0;cursor:pointer}
.ct-x::before,.ct-x::after{content:'';position:absolute;left:11px;right:11px;top:50%;height:1px;background:var(--tinta);transform:rotate(45deg)}
.ct-x::after{transform:rotate(-45deg)}
@media (max-width:820px){
  .ct{place-items:end stretch}
  .ct-caja{width:100%;padding:38px var(--g) calc(30px + env(safe-area-inset-bottom));transform:translateY(100%);transition:opacity .3s ease,transform .6s var(--curva)}
  .ct-fila{grid-template-columns:1fr auto;gap:4px 14px}.ct-et{grid-column:1}.ct-val{grid-column:1}.ct-fila .flecha{grid-column:2;grid-row:1/3}
}
@media (prefers-reduced-motion:reduce){.ct-caja,.ct-fondo{transition-duration:.01s}}

/* los tres servicios bajo el logo (portada y pie): en una línea en ordenador, uno debajo de otro en el móvil */
.servicios3{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.5em 1.3em}
.servicios3 i{font-style:normal;opacity:.6}
@media (max-width:820px){.servicios3{flex-direction:column;gap:9px}.servicios3 i{display:none}}

/* botones: al pasar el ratón o pulsar se rellenan de oro con letra blanca (nunca de negro) */
.boton::before{background:var(--oro)!important}
.boton:hover,.boton:active,.nav.clara .boton.claro:hover{color:#fff!important;border-color:var(--oro)!important;text-shadow:none!important}
.boton:active::before{transform:none}

/* servicios: los párrafos que siguen al texto grande */
.about-mas{max-width:640px;margin-top:clamp(26px,3vw,40px)}
.about-mas p{font-size:clamp(16px,1.25vw,19px);line-height:1.7;color:var(--tinta)}
.about-mas p+p{margin-top:1.1em}
