/* Palermo Cube, demo de Estudio González. Colores: cielo del atardecer de su Instagram, violeta de la luz de la barra, naranja del sol. */
:root{
  color-scheme: light dark;
  --fondo:#e4ecf7; --tinta:#161a33; --suave:#4a5072; --linea:rgba(22,26,51,.16); --tarjeta:rgba(255,255,255,.62);
  --sol:#f08a5d; --sol-f:#c9562a; --violeta:#6a5aa8; --noche:#12152b;
  --serif:"Fraunces", Georgia, serif; --sans:"Outfit", system-ui, sans-serif;
  --ancho:min(1180px, 100% - 48px);
}
@media (prefers-color-scheme: dark){
  :root{ --fondo:#e4ecf7; --tinta:#161a33; --suave:#4a5072; --linea:rgba(22,26,51,.16); --tarjeta:rgba(255,255,255,.62); }
}
html[data-hora="atardecer"]{ --fondo:#cdbfe0; --tinta:#1c1a3a; --suave:#4b476d; --linea:rgba(28,26,58,.18); --tarjeta:rgba(255,255,255,.6); }
html[data-hora="noche"]{ --fondo:#12152b; --tinta:#f3f0ff; --suave:#b9b6d6; --linea:rgba(243,240,255,.2); --tarjeta:rgba(255,255,255,.07); }
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ margin:0; font-family:var(--sans); font-size:17px; line-height:1.55; color:var(--tinta); background:var(--fondo); transition:background-color 1.1s ease, color 1.1s ease; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:-.015em; font-style:normal; }
h1{ font-size:clamp(40px, 6.6vw, 92px); }
h2{ font-size:clamp(32px, 4.6vw, 62px); }
h3{ font-size:clamp(22px, 2.2vw, 28px); }
.punt{ margin-left:0; }
.linea-caja{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
section{ padding:clamp(70px, 9vw, 130px) max(24px, calc((100% - 1180px) / 2)); }

.boton{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 28px; border:1.5px solid var(--tinta); border-radius:999px; background:var(--tinta); color:var(--fondo); font:600 16px var(--sans); text-decoration:none; white-space:nowrap; cursor:pointer; transition:color .35s, background .35s, transform .25s; }
.boton::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--sol); transform:translateX(-101%); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.boton:hover::before{ transform:none; }
.boton:hover{ color:#1a1230; border-color:var(--sol); }
.boton--linea{ background:transparent; color:var(--tinta); }
.boton--chico{ min-height:44px; padding:0 20px; font-size:15px; }
:focus-visible{ outline:3px solid var(--sol); outline-offset:3px; }

/* Carga: el sol sube y la hora avanza */
#carga{ position:fixed; inset:0; z-index:200; background:var(--noche); color:#f3f0ff; display:grid; place-items:center; align-content:center; gap:18px; animation:fueraCarga 0s 5s forwards; }
.sin-carga #carga, html:not(.js-listo) #carga{ display:none; }
@keyframes fueraCarga{ to{ visibility:hidden; } }
.carga__cielo{ position:relative; width:min(280px, 60vw); height:140px; overflow:hidden; border-bottom:1px solid rgba(243,240,255,.4); }
.carga__sol{ position:absolute; left:50%; bottom:-70px; width:110px; height:110px; margin-left:-55px; border-radius:50%; background:var(--sol); }
.carga__hora{ font:500 20px var(--sans); letter-spacing:.08em; color:#cfcbe8; }
.carga__nombre{ font:600 clamp(36px, 7vw, 68px)/1 var(--serif); }

/* Barra */
.barra{ position:fixed; z-index:50; top:14px; left:50%; transform:translateX(-50%); width:min(1180px, 100% - 28px); display:flex; align-items:center; justify-content:space-between; gap:18px; padding:8px 10px 8px 22px; border-radius:999px; background:var(--tarjeta); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--linea); transition:background .6s, box-shadow .4s; }
.barra--baja{ box-shadow:0 8px 30px rgba(10,10,40,.12); }
.marca{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:600 19px var(--serif); }
.marca svg{ color:var(--sol-f); }
html[data-hora="noche"] .marca svg{ color:var(--sol); }
.barra__links{ display:flex; gap:28px; }
.barra__links a{ text-decoration:none; font-weight:500; font-size:15.5px; opacity:.85; }
.barra__links a:hover{ opacity:1; text-decoration:underline; text-underline-offset:5px; }
.barra__menu{ display:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--tinta); position:relative; }
.barra__menu i{ position:absolute; left:14px; right:14px; height:1.5px; background:var(--fondo); transition:transform .3s; }
.barra__menu i:first-child{ top:18px; } .barra__menu i:last-child{ top:25px; }
.menu-abierto .barra__menu i:first-child{ transform:translateY(3.5px) rotate(45deg); }
.menu-abierto .barra__menu i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
.menu-cel{ position:fixed; z-index:45; inset:0; padding:110px 24px 30px; background:var(--fondo); display:flex; flex-direction:column; }
.menu-cel[hidden]{ display:none; }
.menu-cel a{ font:600 38px/1 var(--serif); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--linea); }

[data-revela]{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
[data-revela].visto{ opacity:1; transform:none; }
html:not(.js-listo) [data-revela]{ opacity:1; transform:none; }

/* Portada */
.portada{ min-height:100svh; display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px, 5vw, 80px); align-items:center; padding-top:130px; padding-bottom:40px; background:linear-gradient(180deg, transparent 60%, rgba(240,138,93,.14)); position:relative; }
.portada__sub{ margin-top:26px; max-width:34em; font-size:clamp(17px, 1.5vw, 20px); color:var(--suave); }
.portada__botones{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }
.portada__foto{ margin:0; justify-self:end; width:min(100%, 440px); border-radius:220px 220px 22px 22px; overflow:hidden; box-shadow:0 30px 60px -25px rgba(30,20,80,.45); }
.portada__foto img{ width:100%; aspect-ratio:3 / 4; object-fit:cover; }
.datos{ grid-column:1 / -1; list-style:none; margin:20px 0 0; padding:22px 0 0; border-top:1px solid var(--linea); display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.datos li{ display:grid; gap:2px; }
.datos b{ font:600 clamp(20px, 2vw, 26px)/1.15 var(--serif); }
.datos .num{ font-size:clamp(34px, 4vw, 52px); color:var(--sol-f); }
.datos span{ color:var(--suave); font-size:15px; }

/* La hora */
.hora__cabeza{ display:grid; gap:14px; margin-bottom:36px; max-width:760px; }
.hora__cabeza p{ color:var(--suave); }
.hora__escena{ --c1:#aac4ea; --c2:#e9eef8; --solx:20%; --soly:34%; --solc:#fff3d4; --ciudad:#8191b7; --luz:0; position:relative; isolation:isolate; overflow:hidden; border-radius:28px; padding:clamp(26px, 4vw, 54px) clamp(26px, 4vw, 54px) 130px; color:#14173a; transition:color .8s; }
.cielo{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--c1), var(--c2)); transition:background 1s; }
.cielo::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--c1), var(--c2)); opacity:1; }
.cielo__sol{ position:absolute; left:var(--solx); top:var(--soly); width:clamp(90px, 12vw, 150px); aspect-ratio:1; border-radius:50%; background:var(--solc); box-shadow:0 0 80px 30px rgba(255,200,140,.45); transition:left 1.1s cubic-bezier(.3,.7,.2,1), top 1.1s cubic-bezier(.3,.7,.2,1), background 1s, box-shadow 1s; }
.cielo__ciudad{ position:absolute; left:0; right:0; bottom:0; height:84px; background:var(--ciudad); clip-path:polygon(0 60%,6% 60%,6% 35%,12% 35%,12% 55%,18% 55%,18% 20%,25% 20%,25% 50%,31% 50%,31% 40%,38% 40%,38% 65%,45% 65%,45% 25%,52% 25%,52% 55%,60% 55%,60% 30%,67% 30%,67% 50%,74% 50%,74% 15%,81% 15%,81% 45%,88% 45%,88% 60%,95% 60%,95% 38%,100% 38%,100% 100%,0 100%); transition:background 1s; }
.cielo__luz{ position:absolute; top:12%; left:12%; width:9px; height:9px; border-radius:50%; background:#ffe9a8; box-shadow:0 0 18px 8px rgba(255,220,140,.7); opacity:var(--luz); transition:opacity 1s; }
.cielo__luz--2{ left:30%; top:17% } .cielo__luz--3{ left:48%; top:13% }
.hora__escena[data-estado="1"]{ --c1:#7d6fb0; --c2:#f2a679; --solx:62%; --soly:56%; --solc:#ffc27a; --ciudad:#4a3f78; --luz:.5; }
.hora__escena[data-estado="2"]{ --c1:#2a2a62; --c2:#a4568a; --solx:84%; --soly:78%; --solc:#e9824f; --ciudad:#241d4a; --luz:1; color:#f3f0ff; }
.hora__escena[data-estado="3"]{ --c1:#0e1124; --c2:#2c2455; --solx:92%; --soly:110%; --solc:#e9824f; --ciudad:#161233; --luz:1; color:#f3f0ff; }
.hora__cuerpo{ display:grid; grid-template-columns:minmax(0, 340px) 1fr; gap:clamp(24px, 4vw, 60px); align-items:center; }
.hora__foto{ border-radius:20px; overflow:hidden; box-shadow:0 20px 50px -20px rgba(0,0,0,.5); background:rgba(0,0,0,.2); }
.hora__foto img{ width:100%; aspect-ratio:4 / 5; object-fit:cover; transition:opacity .4s; }
.hora__reloj{ font:600 clamp(60px, 9vw, 130px)/1 var(--serif); font-variant-numeric:tabular-nums; }
.hora__texto h3{ margin-top:6px; font-size:clamp(28px, 3.4vw, 44px); }
.hora__texto p:last-child{ margin-top:14px; max-width:28em; font-size:18px; opacity:.9; }
.hora__tabs{ margin-top:30px; display:flex; gap:10px; flex-wrap:wrap; }
.hora__tabs button{ min-height:48px; padding:0 24px; border-radius:999px; border:1.5px solid currentColor; background:transparent; color:inherit; font:600 16px var(--sans); cursor:pointer; transition:background .3s, color .3s; }
.hora__tabs button[aria-selected="true"]{ background:var(--sol); border-color:var(--sol); color:#1a1230; }
.hora__nota{ margin-top:16px; font-size:14px; opacity:.8; }

/* Terraza */
.terraza h2{ margin-bottom:40px; }
.terraza__grilla{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; align-items:start; }
.terraza article{ display:grid; gap:8px; }
.terraza article img{ width:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:18px; margin-bottom:6px; }
.terraza article:nth-child(even){ margin-top:44px; }
.terraza article p{ color:var(--suave); font-size:16px; }

/* Pedido por pasos */
.pedido{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px, 6vw, 90px); align-items:start; }
.pedido__cabeza{ display:grid; gap:16px; position:sticky; top:110px; }
.pedido__cabeza p{ color:var(--suave); max-width:26em; }
.caja-pasos{ display:grid; gap:24px; padding:clamp(22px, 3vw, 38px); border-radius:24px; background:var(--tarjeta); border:1px solid var(--linea); }
.caja-pasos__top{ display:flex; align-items:center; gap:16px; font-weight:500; color:var(--suave); }
.progreso{ flex:1; height:4px; border-radius:4px; background:var(--linea); overflow:hidden; }
.progreso i{ display:block; height:100%; background:var(--sol); transform-origin:left; transform:scaleX(.2); transition:transform .5s; }
.paso{ display:grid; gap:18px; }
.paso[hidden]{ display:none; }
.ops{ display:flex; flex-wrap:wrap; gap:10px; }
.ops button{ min-height:50px; padding:0 22px; border-radius:999px; border:1.5px solid var(--linea); background:transparent; color:inherit; font:500 16px var(--sans); cursor:pointer; transition:background .25s, border-color .25s, color .25s; }
.ops button:hover{ border-color:var(--sol); }
.ops button.elegido{ background:var(--sol); border-color:var(--sol); color:#1a1230; font-weight:600; }
.paso input{ min-height:54px; padding:0 20px; border-radius:16px; border:1.5px solid var(--linea); background:rgba(255,255,255,.9); color:#161a33; color-scheme:light; font:500 17px var(--sans); }
.vista{ padding:16px 18px; border-radius:18px; background:rgba(0,0,0,.08); }
.vista__t{ font-weight:600; font-size:14px; margin-bottom:8px; color:var(--suave); }
.vista__msg{ padding:14px 16px; border-radius:16px 16px 16px 4px; background:#dcf8c6; color:#111; font-size:15.5px; min-height:3.4em; }
.caja-pasos__pie{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* Google */
.google{ display:grid; grid-template-columns:auto 1fr; gap:clamp(30px, 6vw, 90px); align-items:center; border-top:1px solid var(--linea); }
.google__num{ display:grid; justify-items:center; }
.google__num .num{ font:600 clamp(110px, 16vw, 220px)/.9 var(--serif); color:var(--sol); }
.estrellas{ font-size:28px; letter-spacing:.12em; color:var(--sol); }
.google__texto{ display:grid; gap:18px; justify-items:start; }
.google__texto p{ max-width:32em; color:var(--suave); }

/* Preguntas */
.preguntas{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px, 6vw, 90px); align-items:start; border-top:1px solid var(--linea); }
.faq details{ border-bottom:1px solid var(--linea); padding:20px 0; }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; font:600 clamp(20px, 2vw, 25px)/1.2 var(--serif); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font:400 28px/1 var(--sans); color:var(--sol); transition:transform .3s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin-top:12px; color:var(--suave); max-width:36em; }

/* Dónde */
.donde{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px, 5vw, 70px); align-items:center; border-top:1px solid var(--linea); }
.donde__texto{ display:grid; gap:18px; }
.donde__texto p{ color:var(--suave); }
.donde__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.donde__mapa{ position:relative; margin:0; border-radius:22px; overflow:hidden; filter:grayscale(1) contrast(1.05); }
.donde__mapa img{ width:100%; }
.donde__pin{ position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-22px 0 0 -11px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--sol); box-shadow:0 0 0 8px rgba(240,138,93,.3); }

/* Pie */
.pie{ padding:70px max(24px, calc((100% - 1180px) / 2)) 110px; border-top:1px solid var(--linea); display:grid; gap:26px; }
.pie__fila{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
.pie__marca{ font:600 28px var(--serif); margin-bottom:8px; }
.pie__t{ font-weight:600; margin-bottom:8px; }
.pie p, .pie a{ color:var(--suave); font-size:15.5px; }
.pie [data-legal-links]{ display:grid; gap:4px; }
.pie__alcohol, .pie__demo{ font-size:14px; }

.barra-cel{ display:none; }
.demo{ position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:20px; background:rgba(14,16,40,.6); backdrop-filter:blur(4px); }
.demo[hidden]{ display:none; }
.demo__caja{ width:min(460px, 100%); padding:30px; border-radius:20px; background:#fff; color:#161a33; display:grid; gap:14px; }
.demo__t{ font:600 32px var(--serif); }
.demo__msg{ padding:16px 18px; border-radius:16px 16px 16px 4px; background:#dcf8c6; color:#111; font-size:15.5px; }
.demo__caja .boton{ background:#161a33; color:#fff; }

/* Legal */
:root{ --lg-fondo:#fff; --lg-tinta:#161a33; --lg-acento:#c9562a; --lg-linea:rgba(22,26,51,.18); --lg-radio:18px; }

@media (max-width:900px){
  .barra__links{ display:none; } .barra__menu{ display:block; } .barra > .boton{ display:none; }
  .portada{ grid-template-columns:1fr; padding-top:110px; min-height:0; }
  .portada__foto{ justify-self:start; width:min(100%, 340px); order:2; }
  .datos{ grid-template-columns:1fr; gap:14px; order:3; }
  .hora__cuerpo{ grid-template-columns:1fr; }
  .hora__foto{ max-width:300px; }
  .terraza__grilla{ grid-template-columns:1fr 1fr; gap:16px; }
  .terraza article:nth-child(even){ margin-top:0; }
  .pedido, .preguntas, .donde, .google{ grid-template-columns:1fr; }
  .pedido__cabeza{ position:static; }
  .pie__fila{ grid-template-columns:1fr; }
  .barra-cel{ position:fixed; z-index:40; left:0; right:0; bottom:0; display:grid; grid-template-columns:1.4fr 1fr; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--tarjeta); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--linea); }
  .barra-cel .boton{ min-height:50px; padding:0 12px; }
}
@media (max-width:480px){
  section{ padding-inline:20px; }
  .terraza__grilla{ grid-template-columns:1fr; }
  .terraza article img{ aspect-ratio:4 / 3.6; }
  .hora__tabs button{ flex:1; padding:0 10px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01s !important; animation-duration:.01s !important; } html{ scroll-behavior:auto; } }

/* mejora 1: ciudad en dos capas y ventanas que se prenden de noche */
.cielo__ciudad--fondo{ height:120px; opacity:.45; clip-path:polygon(0 70%,8% 70%,8% 40%,15% 40%,15% 62%,22% 62%,22% 30%,30% 30%,30% 58%,40% 58%,40% 22%,48% 22%,48% 60%,57% 60%,57% 35%,66% 35%,66% 55%,76% 55%,76% 25%,86% 25%,86% 50%,94% 50%,94% 32%,100% 32%,100% 100%,0 100%); }
.cielo__ventanas{ position:absolute; left:0; right:0; bottom:0; height:60px; opacity:calc(var(--luz) * .9); transition:opacity 1s; background-image:radial-gradient(circle, #ffd98a 0 1.6px, transparent 2px); background-size:22px 14px; background-position:6px 18px; -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 8%,#000 14%,transparent 24%,#000 34%,transparent 46%,#000 58%,transparent 70%,#000 80%,transparent 92%,#000); mask-image:linear-gradient(90deg,#000 0,transparent 8%,#000 14%,transparent 24%,#000 34%,transparent 46%,#000 58%,transparent 70%,#000 80%,transparent 92%,#000); }
@media (prefers-reduced-motion: reduce){ .cielo__ventanas{ transition:none } }

/* mejora 2: la portada ES la escena de la hora */
.portada{ --c1:#aac4ea; --c2:#e9eef8; --solx:74%; --soly:20%; --solc:#fff3d4; --ciudad:#8191b7; --luz:0; --est:0; isolation:isolate; overflow:hidden; display:block; min-height:100svh; padding-top:140px; padding-bottom:230px; background:none; color:var(--tinta); transition:color .8s; }
.portada .cielo{ z-index:-1; }
.portada .cielo__sol{ width:clamp(110px, 16vw, 230px); }
.portada .cielo__ciudad{ height:clamp(110px, 17vw, 210px); }
.portada .cielo__ciudad--fondo{ height:clamp(150px, 23vw, 290px); }
.portada .cielo__ventanas{ height:clamp(80px, 12vw, 150px); background-size:26px 17px; }
.portada[data-estado="1"]{ --c1:#7d6fb0; --c2:#f2a679; --solx:78%; --soly:42%; --solc:#ffc27a; --ciudad:#4a3f78; --luz:.5; --est:0; }
.portada[data-estado="2"]{ --c1:#2a2a62; --c2:#a4568a; --solx:82%; --soly:64%; --solc:#e9824f; --ciudad:#241d4a; --luz:1; --est:.35; --tinta:#f3f0ff; --suave:#d4d0ee; --linea:rgba(243,240,255,.28); --fondo:#12152b; }
.portada[data-estado="3"]{ --c1:#0e1124; --c2:#2c2455; --solx:86%; --soly:112%; --solc:#e9824f; --ciudad:#161233; --luz:1; --est:1; --tinta:#f3f0ff; --suave:#d4d0ee; --linea:rgba(243,240,255,.28); --fondo:#12152b; }
.cielo__estrellas{ position:absolute; inset:0 0 40% 0; opacity:var(--est, 0); transition:opacity 1.2s; background-image:radial-gradient(circle, #fff 0 1px, transparent 1.6px), radial-gradient(circle, #ffe9c4 0 1.2px, transparent 1.8px); background-size:97px 71px, 143px 109px; background-position:12px 20px, 60px 48px; }
.hora__escena[data-estado="2"]{ --est:.35; } .hora__escena[data-estado="3"]{ --est:1; }
.portada__texto{ max-width:820px; position:relative; }
.portada__hora{ margin-top:34px; display:grid; gap:10px; }
.portada__hora p{ font-weight:500; font-size:15.5px; color:var(--suave); }
.portada .hora__tabs{ margin-top:0; }
.portada .datos{ position:absolute; left:max(24px, calc((100% - 1180px) / 2)); right:max(24px, calc((100% - 1180px) / 2)); bottom:clamp(120px, 19vw, 230px); margin:0; z-index:2; }
.portada .datos .num{ color:var(--sol); }
.pos-der{ object-position:78% center; }
@media (max-width:900px){
  .portada{ min-height:0; padding-top:112px; padding-bottom:300px; }
  .portada .datos{ grid-template-columns:1fr 1fr; bottom:150px; }
  .portada .datos li:last-child{ grid-column:1 / -1; }
  .portada[data-estado] { --solx:70%; }
}
@media (max-width:480px){
  .portada{ padding-bottom:290px; }
  .portada__hora .hora__tabs{ flex-wrap:nowrap; }
  .portada__hora .hora__tabs button{ padding:0 4px; font-size:15px; }
}
/* mejora 2b: datos en el flujo, ciudad más baja */
.portada{ padding-bottom:clamp(150px, 16vw, 230px); }
.portada .cielo__ciudad{ height:clamp(70px, 10vw, 140px); }
.portada .cielo__ciudad--fondo{ height:clamp(100px, 14vw, 195px); }
.portada .datos{ position:static; margin-top:clamp(36px, 5vw, 64px); }
@media (max-width:900px){
  .portada{ padding-bottom:170px; }
  .portada .datos{ margin-top:34px; }
  .portada .cielo__sol{ width:96px; }
  .portada[data-estado]{ --solx:78%; }
}
@media (max-width:480px){ .portada{ padding-bottom:160px; } }

/* mejora 2c: botones y horas en una fila, estrellas sin cuadrícula, ciudad a la vista */
.portada__texto{ max-width:1180px; }
.portada__texto h1{ max-width:15em; font-size:clamp(40px, 5.8vw, 82px); }
.portada__fila{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:22px 40px; }
.portada__fila .portada__botones{ margin-top:0; }
.portada__hora{ margin-top:0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.portada__hora p{ white-space:nowrap; }
.cielo__estrellas{ background-image:radial-gradient(circle, #fff 0 1px, transparent 1.6px), radial-gradient(circle, #ffe9c4 0 1.3px, transparent 1.9px), radial-gradient(circle, #fff 0 .9px, transparent 1.5px), radial-gradient(circle, #dcd6ff 0 1.2px, transparent 1.8px); background-size:131px 97px, 173px 211px, 229px 149px, 89px 251px; background-position:12px 20px, 60px 48px, 101px 7px, 33px 90px; }
@media (max-width:900px){ .portada__fila{ display:grid; gap:22px; } .portada__hora{ display:grid; gap:10px; } }
/* mejora 2d: el sol por la derecha, sin tapar el título */
.portada{ --solx:91%; --soly:12%; }
.portada[data-estado="1"]{ --solx:91%; --soly:36%; }
.portada[data-estado="2"]{ --solx:91%; --soly:62%; }
.portada[data-estado="3"]{ --solx:91%; --soly:112%; }
@media (max-width:900px){ .portada[data-estado]{ --solx:84%; } }