/* Arábiga · estilos compartidos de Sobre Arábiga y Blog
   crema #FFF4E1 · azul azulejo #80A1C7 · azul noche #132937 */
:root{
  color-scheme:light;
  --crema:#FFF4E1; --crema-2:#F5E7CC; --crema-3:#EFDDBE; --azul:#80A1C7; --azul-soft:#B9CCE1;
  --noche:#132937; --noche-2:#0D1E29; --tinta-2:#3E5261; --muted:#6F7F8B;
  --line:rgba(19,41,55,.16); --line-d:rgba(255,244,225,.16);
  --display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --gut:clamp(16px,3.4vw,48px); --ease:cubic-bezier(.22,1,.36,1); --navh:66px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--crema);color:var(--noche);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;width:100%;height:100%;object-fit:cover;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
::selection{background:var(--azul);color:var(--noche)}

/* type */
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.idx{font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.dark .idx{color:rgba(255,244,225,.6)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.005em}
.display,.h2,.h3{font-family:var(--display);font-weight:500;text-transform:uppercase;text-wrap:balance}
.display{letter-spacing:-.045em;line-height:.88;font-size:clamp(50px,10vw,168px)}
.h2{letter-spacing:-.04em;line-height:.92;font-size:clamp(40px,6.4vw,104px)}
.h3{letter-spacing:-.03em;line-height:.98;font-size:clamp(24px,2.4vw,34px)}
.display .serif,.h2 .serif{font-size:1.06em;color:var(--azul)}
.dark .h2 .serif,.dark .display .serif,.over .display .serif{color:var(--azul-soft)}
.phero .display{font-size:clamp(44px,min(9vw,14vh),150px)}
.lede{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.18}
.body{font-size:15.5px;color:var(--tinta-2);max-width:52ch}
.dark .body{color:rgba(255,244,225,.78)}

/* reveal */
.anim .lines .ln{display:block;overflow:hidden;padding-bottom:.05em}
.lines .ln{display:block}
.anim .lines .ln>span{display:inline-block;transform:translateY(108%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.anim .lines.in .ln>span{transform:none}
.anim .fu{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.anim .fu.in{opacity:1;transform:none}
.media{position:relative;overflow:hidden;background:var(--noche)}
.anim .clip{clip-path:inset(10% 8% 10% 8%);transition:clip-path 1.5s var(--ease)}
.anim .clip img{transform:scale(1.2);transition:transform 1.8s var(--ease)}
.anim .clip.in{clip-path:inset(0)}
.anim .clip.in img{transform:scale(1)}

/* buttons: el texto sube y aparece la copia (el span mide 2 líneas → se mueve la mitad) */
.btn{display:inline-flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:14px 22px;border:1px solid currentColor;border-radius:999px;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s;white-space:nowrap}
.roll{display:inline-block;height:1.3em;line-height:1.3em;overflow:hidden;vertical-align:top}
.roll>span{display:block;transition:transform .55s var(--ease)}
.roll>span::after{content:attr(data-t);display:block}
a:hover .roll>span,button:hover .roll>span{transform:translateY(-50%)}
.btn .arr{display:inline-block;transition:transform .55s var(--ease)}
.btn:hover .arr{transform:translateX(4px) rotate(-45deg)}
.btn.solid{background:var(--noche);color:var(--crema);border-color:var(--noche)}
.btn.solid:hover{background:var(--azul);border-color:var(--azul);color:var(--noche)}
.btn.light{background:var(--crema);color:var(--noche);border-color:var(--crema)}
.btn.light:hover{background:var(--azul);border-color:var(--azul)}
.btn.blue{background:var(--azul);color:var(--noche);border-color:var(--azul)}
.btn.blue:hover{background:var(--noche);color:var(--crema);border-color:var(--noche)}
.btn.line:hover{background:var(--noche);color:var(--crema);border-color:var(--noche)}
.dark .btn.line:hover{background:var(--crema);color:var(--noche);border-color:var(--crema)}

section{position:relative}
.sec{padding:clamp(80px,11vw,160px) var(--gut)}
.dark{background:var(--noche);color:var(--crema)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(36px,5vw,72px)}
.dark .sec-head{border-color:var(--line-d)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) var(--gut) 12px;min-height:var(--navh);color:var(--crema);
  background:rgba(19,41,55,.14);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,244,225,.14);--logo-accent:var(--azul-soft);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s}
.nav.solid{background:var(--crema);color:var(--noche);border-color:var(--line);--logo-accent:var(--azul);-webkit-backdrop-filter:none;backdrop-filter:none}
.nav .brand{display:block;width:clamp(96px,11vw,132px);justify-self:center}
.logo-svg{display:block;width:100%;height:auto}
.nav .right{justify-self:end;display:flex;align-items:center;gap:18px}
.nav .pill{border:1px solid currentColor;border-radius:999px;padding:8px 14px}
.nav.solid .pill{background:var(--noche);color:var(--crema);border-color:var(--noche)}
.menu-btn{display:flex;align-items:center;gap:12px;justify-self:start}
.burger{display:inline-flex;flex-direction:column;gap:6px;width:30px}
.burger b{display:block;height:2px;width:30px;background:currentColor;border-radius:2px;transition:width .45s var(--ease)}
.burger b:nth-child(2){width:18px}
.menu-btn:hover .burger b:nth-child(2){width:30px}

/* overlay */
.overlay{position:fixed;inset:0;z-index:60;background:var(--noche);color:var(--crema);display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) calc(28px + env(safe-area-inset-bottom,0px));clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);pointer-events:none;overflow:hidden}
.overlay.open{clip-path:inset(0);pointer-events:auto}
.overlay .top{display:flex;justify-content:space-between;align-items:center}
.overlay .star{position:absolute;right:-12vw;bottom:-14vw;width:min(62vw,620px);height:auto;opacity:.1;pointer-events:none}
.overlay ul{list-style:none;position:relative}
.overlay li{overflow:hidden;border-bottom:1px solid var(--line-d)}
.overlay li a{display:flex;align-items:baseline;gap:18px;padding:10px 0;font-family:var(--display);font-size:clamp(40px,8vw,104px);font-weight:500;text-transform:uppercase;letter-spacing:-.045em;line-height:1;transform:translateY(105%);transition:transform .9s var(--ease),color .3s}
.overlay.open li a{transform:none}
.overlay li:nth-child(2) a{transition-delay:.06s}.overlay li:nth-child(3) a{transition-delay:.12s}.overlay li:nth-child(4) a{transition-delay:.18s}
.overlay li a:hover,.overlay li a[aria-current]{color:var(--azul)}
.overlay li a i{font-style:normal;font-family:var(--sans);font-size:12px;letter-spacing:.08em;opacity:.5;font-weight:500}
.overlay .ofoot{display:flex;flex-wrap:wrap;gap:12px 40px;font-size:13px;opacity:.75;position:relative}

/* page hero con foto en paralaje */
.phero{position:relative;height:min(92svh,860px);min-height:560px;overflow:hidden;color:var(--crema);background:var(--noche-2);display:flex;align-items:flex-end}
.phero .bg{position:absolute;inset:-12% 0;height:124%;will-change:transform}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,30,41,.55) 0%,rgba(13,30,41,.12) 42%,rgba(13,30,41,.82) 100%);pointer-events:none}
.phero .in{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(32px,5vw,64px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.phero .side{max-width:360px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;font-size:15px}
.over .display .serif{color:var(--azul-soft)}
.phero .display{font-size:clamp(44px,min(9vw,14vh),150px)}

/* cabecera simple (páginas sin foto) */
.phead{padding:calc(var(--navh) + clamp(48px,7vw,110px)) var(--gut) clamp(40px,5vw,72px)}
.phead .row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}

/* footer */
footer.dark{padding:clamp(72px,9vw,130px) var(--gut) 0}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-top:28px;border-top:1px solid var(--line-d);font-size:14px}
.fcols h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,244,225,.5);margin-bottom:16px}
.fcols a,.fcols p{display:block;color:rgba(255,244,225,.86);margin-bottom:10px;transition:color .3s}
.fcols a:hover{color:var(--azul)}
.ci{display:flex!important;align-items:center;gap:10px}
.ci svg{width:18px;height:18px;flex:none;opacity:.85}
.giant{margin-top:clamp(60px,8vw,110px);color:var(--crema);--logo-accent:var(--azul)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:22px 0 calc(26px + env(safe-area-inset-bottom,0px));font-size:12px;color:rgba(255,244,225,.5)}
.fcta{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(60px,8vw,110px)}

@media (max-width:900px){ .fcols{grid-template-columns:1fr 1fr} .nav .hide-sm{display:none} }
@media (max-width:560px){ .menu-btn .mlab{display:none} .fcols{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .anim .lines .ln>span,.anim .fu,.anim .clip,.anim .clip img{transform:none!important;opacity:1!important;clip-path:none!important}
}