/* Portadas de prueba: base y secciones de abajo (iguales en las tres), con el lenguaje de Sardinia */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fondo);color:var(--tinta);font-family:'Jost',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.cargando{overflow:hidden}
a{color:inherit;text-decoration:none}
img,video,canvas{display:block}
.serif{font-family:'Playfair Display',serif;font-weight:500;letter-spacing:-.01em}
.cubre{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
section{position:relative}
.pad{padding:clamp(80px,12vw,170px) var(--g)}

/* entradas */
.sube{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1.1s var(--sale)}
.sube.on{opacity:1;transform:none}
@media (max-width:820px){.sube{transform:translateY(56px);transition:opacity 1.1s ease,transform 1.3s var(--sale)}}
/* líneas que suben desde detrás de una máscara */
.linea{display:block;overflow:hidden;padding-bottom:.06em}
.linea>span{display:block;transform:translateY(105%);transition:transform 1.3s var(--sale)}
.listo .linea>span{transform:none}

/* manifiesto: palabras que se encienden con el scroll */
.manifiesto{display:grid;grid-template-columns:1fr 2fr;gap:var(--g)}
.grande{font-family:'Playfair Display',serif;font-size:clamp(26px,2.8vw,44px);line-height:1.2;font-weight:400}
/* como en Alma: cada palabra aparece desde un leve desenfoque, una detrás de otra, al entrar el texto en pantalla */
.palabras .p{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.215,.61,.355,1),filter .8s cubic-bezier(.215,.61,.355,1),transform .8s cubic-bezier(.215,.61,.355,1);
  transition-delay:calc(var(--wi) * 45ms)}
.palabras.on .p{opacity:1;filter:blur(0);transform:none}

/* las tres áreas: filas con foto que sigue al ratón */
.areas-cab{display:grid;grid-template-columns:1fr 2fr;gap:var(--g);align-items:end;margin-bottom:clamp(40px,5vw,80px)}
.areas-cab h2{font-size:clamp(32px,3.6vw,56px);line-height:1.08;max-width:11em}
.area{display:grid;grid-template-columns:70px 1.3fr 1fr 170px 110px;gap:var(--g);align-items:center;border-top:1px solid var(--linea);padding:clamp(26px,3vw,44px) 0;position:relative}
.area:last-of-type{border-bottom:1px solid var(--linea)}
.area .n{font-family:'Playfair Display',serif;font-size:clamp(20px,1.8vw,26px);color:var(--oro)}
.area h3{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(28px,3.3vw,54px);line-height:1.05;transition:transform .7s var(--sale)}
.area p{font-size:15px;line-height:1.6;color:var(--gris);max-width:320px}
.area .ir{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.area .ir i{width:18px;height:1px;background:currentColor;transition:width .5s var(--sale)}
.area:hover h3{transform:translateX(18px)}
.area:hover .ir i{width:34px}
.area .mini{grid-column:4;grid-row:1;aspect-ratio:4/3;overflow:hidden;background:#E6DACB}
.area .mini img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.4s var(--sale)}
.area.on .mini img{transform:scale(1.02)}
.area:hover .mini img{transform:scale(1.08)}
.area .ir{grid-column:5;justify-self:end}
.area:not(:has(.mini)){grid-template-columns:70px 1.3fr 1fr 110px}
.area:not(:has(.mini)) .ir{grid-column:4}

/* foto que se abre a pantalla completa */
.abre{height:100svh;min-height:520px;overflow:hidden;clip-path:inset(var(--i,14%));will-change:clip-path;contain:paint;background:#E6DACB}
.abre img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transform:translateY(var(--py,0));will-change:transform}
.abre .sobre{position:absolute;left:0;right:0;bottom:clamp(40px,7vw,90px);text-align:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 24px rgba(0,0,0,.55)}
.abre .sobre h2{font-size:clamp(38px,5.4vw,88px);line-height:1}

/* conocer a Gianfranca */
.conoce{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);align-items:center}
.conoce .foto{aspect-ratio:4/5;overflow:hidden;max-width:560px;background:#E6DACB}
.conoce .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.14);transition:transform 1.6s var(--sale)}
.conoce .foto.on img{transform:scale(1.03)}
.conoce blockquote{font-family:'Playfair Display',serif;font-size:clamp(24px,2.4vw,38px);line-height:1.22;margin:22px 0 34px}
.ver{font-size:15px;position:relative;padding-bottom:4px}
.ver::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .5s var(--sale)}
.ver:hover::after{transform:scaleX(.3)}

/* CTA */
.cta{height:100svh;min-height:560px;color:var(--papel);overflow:hidden;background:#2a211b}
.cta img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transform:translateY(var(--py,0))}
.cta .dentro{position:absolute;z-index:2;left:var(--g);right:var(--g);bottom:clamp(40px,7vw,90px);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--g);text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 24px rgba(0,0,0,.55)}
.cta h2{font-size:clamp(44px,6.4vw,100px);line-height:.98;max-width:8em}
.cta .lado{max-width:340px;font-size:15px;line-height:1.6}
.cta .boton{margin-top:22px}

/* pie */
footer{padding:clamp(60px,7vw,90px) var(--g) 24px}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);font-size:14px;line-height:1.7}
.cols h4{font-weight:500;margin-bottom:10px}
.cols .gris{color:var(--gris)}
.news{display:flex;border-bottom:1px solid var(--tinta);padding:8px 0;margin-top:12px}
.news input{flex:1;border:0;background:none;font:inherit;outline:none}
.mono-pie{display:block;width:clamp(54px,6vw,86px);margin:clamp(50px,7vw,90px) auto 0}
.gigante{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(30px,7.2vw,132px);line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin-top:clamp(30px,4vw,60px);overflow:hidden;text-align:center}
.gigante:has(img){font-size:0;line-height:0}
.gigante img{display:block;width:min(680px,82vw);height:auto;margin:0 auto}
.gigante span{display:inline-block;transform:translateY(100%);transition:transform 1.3s var(--sale)}
.gigante.on span{transform:none}
.sublema{text-align:center;font-size:11.5px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--oro);margin-top:16px}
.legal{display:flex;justify-content:space-between;font-size:12px;color:var(--gris);margin-top:14px}

@media (max-width:820px){
  .manifiesto,.areas-cab,.conoce,.cols{grid-template-columns:1fr}
  .area{grid-template-columns:40px 1fr auto;gap:14px 12px;padding:26px 0}
  .area p{grid-column:2/-1;font-size:14px}
  .area .ir span{display:none}
  .area .ir{grid-row:1;grid-column:3}
  .area .mini{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10;margin-top:6px}
  .area .ir{justify-self:end}
  .area:not(:has(.mini)){grid-template-columns:40px 1fr auto}
  .area:not(:has(.mini)) .ir{grid-column:3}
  .abre{--i:10%}
  .cta .dentro{flex-direction:column;align-items:flex-start}
  .gigante{font-size:6.1vw;letter-spacing:.05em}
  .sublema{letter-spacing:.24em;font-size:10px}
  .legal{flex-direction:column;align-items:center;gap:4px;text-align:center}
}

/* selector de las tres pruebas (solo para enseñarlas) */
.prueba{position:fixed;z-index:50;left:50%;top:78px;transform:translateX(-50%);display:flex;gap:4px;padding:5px;background:rgba(23,18,14,.82);border-radius:40px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:opacity .8s ease 1.2s}
.listo .prueba{opacity:1}
.prueba a{color:rgba(252,250,246,.7);padding:9px 14px;border-radius:30px;white-space:nowrap}
.prueba a.actual{background:var(--papel);color:var(--tinta)}
@media (max-width:820px){.prueba{top:auto;bottom:14px}}