/* Georgina Uribe Consultora - aviso de sitio en construcción */
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-latin-wght.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Open Sans";src:url(../fonts/open-sans-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  --bg:#fff;--ink:#121212;--ink-soft:#1a1a1a;--muted:#5c6066;
  --arc:#202020;--arc-solid:#2e2e2e;--rule:#0091fd;--dot:#23acfa;--link:#0072c9;
  --shadow:rgba(0,0,0,.38);--ctl-line:rgba(0,0,0,.16);--ctl-hover:rgba(0,145,253,.1);
  --u:clamp(.55px,min(calc(100vw / 1280),calc((100vh - 112px) / 586)),1.2px);
  --pw:min(58vw,29vh,300px);
  --logo-w:min(84vw,460px);
}
@supports (height:1svh){:root{
  --u:clamp(.55px,min(calc(100vw / 1280),calc((100svh - 112px) / 586)),1.2px);
  --pw:min(58vw,29svh,300px);
}}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#12151b;--ink:#f3f4f6;--ink-soft:#e7e9ed;--muted:#a4a9b2;
  --arc:#e7e9ed;--arc-solid:#e7e9ed;--rule:#2ba3ff;--dot:#58bcff;--link:#6cc2ff;
  --shadow:rgba(0,0,0,.65);--ctl-line:rgba(255,255,255,.24);--ctl-hover:rgba(88,188,255,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-weight:500;transition:background-color .35s ease,color .35s ease}
h1,p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--rule);outline-offset:3px;border-radius:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;overflow-x:clip}

/* Controles */
.bar{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:10px 14px 0;position:relative;z-index:2}
.lang{display:flex;align-items:center;border:1px solid var(--ctl-line);border-radius:999px;padding:2px;font-size:13px;font-weight:600}
.lang>*{display:grid;place-items:center;min-width:36px;height:32px;border-radius:999px;text-decoration:none}
.lang [aria-current]{background:var(--rule);color:#fff}
[data-theme=dark] .lang [aria-current]{color:#06121d}
.lang a:hover{background:var(--ctl-hover)}
.theme{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--ctl-line);border-radius:50%;background:none;color:inherit;cursor:pointer}
.theme:hover{background:var(--ctl-hover)}
.theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .i-sun{display:none}
[data-theme=dark] .theme .i-sun{display:block}
[data-theme=dark] .theme .i-moon{display:none}

/* Composición: móvil y vertical (como la imagen móvil original) */
.stage{position:relative;flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 16px 12px;gap:10px}
.portrait{position:relative;width:var(--pw);aspect-ratio:376/440;flex:none}
.portrait svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc-line{fill:none;stroke:var(--arc);stroke-width:3.4}
.arc-solid{fill:none;stroke:var(--arc-solid);stroke-width:24;stroke-linecap:round}
.photo{position:absolute;left:2.926%;top:10.682%;width:90.426%;height:auto;aspect-ratio:1;display:block;border-radius:50%;box-shadow:-3px 4px 9px var(--shadow)}
.dots{position:absolute;width:clamp(34px,8vw,60px);height:auto;overflow:visible;fill:var(--dot)}
.dots--a{top:6px;left:80%}
.dots--b{top:calc(var(--pw) * .94);left:8%}

.info{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%;position:relative}
.logo{position:relative;width:var(--logo-w);max-width:100%;font-weight:400;font-size:calc(var(--logo-w) * 21 / 655);line-height:1}
.logo svg{display:block;width:100%;height:auto;fill:currentColor}
.logo__sub{position:absolute;left:73.5%;top:66.1%;font-family:"Open Sans",Arial,sans-serif;text-transform:uppercase;letter-spacing:.2em;white-space:nowrap}

.contact{margin-top:12px;font-size:clamp(13px,3.85vw,21px);line-height:1.6;color:var(--ink-soft)}
.contact li{display:flex;flex-wrap:wrap;justify-content:center;column-gap:.32em}
.contact b{font-weight:570}
.contact a{text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--rule),var(--rule)) 0 100%/0 1.5px no-repeat;transition:background-size .3s ease,color .2s}
.contact a:hover{background-size:100% 1.5px;color:var(--link)}

.rule{width:54%;max-width:400px;height:3px;margin:12px 0;background:var(--rule);border-radius:2px}
.msg{max-width:36em;text-align:center;font-size:clamp(13.5px,3.75vw,18px);line-height:1.42}
.msg p+p{margin-top:.75em}

.foot{padding:6px 16px 12px;text-align:center;font-size:12.5px;font-weight:500;color:var(--muted)}
.foot a{color:var(--link);font-weight:600;text-underline-offset:2px}

/* Teléfonos bajos: se compacta para que quepa en una pantalla */
@media (max-height:700px) and (orientation:portrait){
  :root{--pw:min(52vw,25vh);--logo-w:min(74vw,460px)}
  .stage{padding-top:0;padding-bottom:4px;gap:4px}
  .contact{margin-top:6px;line-height:1.45}
  .rule{margin:8px 0}
  .msg{line-height:1.34}
  .msg p+p{margin-top:.5em}
  .foot{padding:2px 16px 8px}
}

/* Horizontal: proporciones de la imagen de escritorio de 1280 x 586 */
@media (min-width:640px) and (orientation:landscape){
  .bar{position:absolute;top:0;right:0;padding:12px 16px 0}
  .page{position:relative;justify-content:center}
  .stage{flex:none;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:0;width:calc(var(--u) * 1280);max-width:100%;margin:auto;padding:0;min-height:calc(var(--u) * 586)}
  .portrait{width:calc(var(--u) * 376);margin:calc(var(--u) * 82) 0 0 calc(var(--u) * 56)}
  .photo{box-shadow:calc(var(--u) * -3) calc(var(--u) * 4) calc(var(--u) * 9) var(--shadow)}
  .dots{width:calc(var(--u) * 59)}
  .dots--a{top:calc(var(--u) * 22);left:calc(var(--u) * 1199)}
  .dots--b{top:calc(var(--u) * 538);left:calc(var(--u) * 25)}
  .info{align-items:flex-start;width:auto;flex:1;margin:calc(var(--u) * 28) 0 0 calc(var(--u) * 63);--logo-w:calc(var(--u) * 655)}
  .contact li{justify-content:flex-start}
  .contact{margin-top:calc(var(--u) * 21);font-size:max(15px,calc(var(--u) * 25));line-height:calc(var(--u) * 42);min-height:0}
  .rule{width:100vw;max-width:none;height:max(2px,calc(var(--u) * 2.6));margin:calc(var(--u) * 12) 0 calc(var(--u) * 13);border-radius:0}
  .msg{max-width:none;margin-left:calc(var(--u) * 2);text-align:left;font-size:max(13.5px,calc(var(--u) * 18.8));line-height:1.344}
  .msg p+p{margin-top:calc(var(--u) * 25)}
  .msg span{display:block}
  .foot{padding:10px 16px 12px}
}
@media (min-width:640px) and (orientation:landscape) and (max-height:520px){
  .contact{line-height:1.5}
  .bar{position:relative;padding-top:6px}
  .stage{min-height:0}
  .dots--a{display:none}
}

/* Animación: si el visitante pide menos movimiento nada de esto aplica y todo se ve completo */
@media (prefers-reduced-motion:no-preference){
  .a-up{animation:up .75s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
  .a-fade{animation:fade .9s ease var(--d,0s) both}
  .photo{animation:photo 1s cubic-bezier(.2,.7,.2,1) .1s both}
  .arc-line,.arc-solid{stroke-dasharray:1 1.02;animation:draw 1.3s cubic-bezier(.45,.05,.25,1) .3s both}
  .arc-solid{animation-delay:.45s}
  .sway-a,.sway-b{transform-box:view-box;transform-origin:48.27% 49.32%;animation:sway 18s ease-in-out 1.8s infinite}
  .sway-b{animation-direction:reverse;animation-duration:23s}
  .logo svg{animation:write 1.35s cubic-bezier(.5,.1,.35,1) .25s both}
  .logo__sub{animation:track .8s ease 1.25s both}
  .rule{transform-origin:50% 50%;animation:grow .8s cubic-bezier(.3,.7,.2,1) 1.6s both}
  .dots circle{animation:twinkle 5s ease-in-out calc(1.6s + var(--i) * .17s) infinite}
  .dots{animation:fade 1s ease 1.3s both}
  @media (min-width:640px) and (orientation:landscape){.rule{transform-origin:0 50%}}
}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes photo{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sway{0%,100%{transform:none}25%{transform:rotate(2.4deg)}75%{transform:rotate(-2.4deg)}}
@keyframes write{from{clip-path:inset(-6% 106% -6% -6%)}to{clip-path:inset(-6% -6% -6% -6%)}}
@keyframes track{from{opacity:0;letter-spacing:.32em}to{opacity:1;letter-spacing:.2em}}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}