/* PixuTSt / CuenTita: hoja de estilos unica. Sin recursos externos. */
@font-face{font-family:Fredoka;src:url('/fonts/fredoka.ttf') format('truetype');font-weight:300 700;font-display:swap}

:root{
  --night:#1B1646;--night-light:#2E2A6B;--moon:#FFD166;--paper:#FFF8E7;--ink:#282344;
  --coral:#FF6B6B;--mint:#4ECDC4;--lilac:#B39DDB;--orange:#E8742A;
  --titulos:Fredoka,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--night);color:var(--paper);font:18px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Cielo de acuarela con velo NightSky para que el texto crema pase AA */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(27,22,70,.86),rgba(27,22,70,.94)),url('/img/cielo.webp') center/cover}
img{max-width:100%}
a{color:inherit;text-underline-offset:.18em}
a:hover{color:var(--moon)}
a:focus-visible,summary:focus-visible,.gallery:focus-visible{outline:3px solid var(--moon);outline-offset:4px;border-radius:4px}

.skip{position:absolute;left:1rem;top:-6rem;background:var(--paper);color:var(--ink);padding:.7rem 1rem;z-index:10;border-radius:8px}
.skip:focus{top:1rem}
.shell{width:min(1120px,calc(100% - 2rem));margin-inline:auto}

h1,h2,h3,.brand,.site-header nav a,.button,summary{font-family:var(--titulos)}
h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.1;font-weight:700;margin:.4rem 0 1rem}
h2{font-size:clamp(1.45rem,3.2vw,2rem);line-height:1.2;font-weight:600;margin:2.2rem 0 .8rem}
h3{line-height:1.25;margin:1.6rem 0 .6rem}

/* Encabezado */
.site-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem;padding:.5rem 0;min-height:72px}
.brand{font-size:1.6rem;font-weight:700;text-decoration:none;color:var(--moon);display:inline-flex;align-items:center;min-height:48px}
.brand:hover{color:var(--paper)}
.site-header nav{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem}
.site-header nav a{min-height:48px;display:inline-flex;align-items:center;padding:0 .8rem;text-decoration:none;font-weight:600}
.site-header nav a.language{border:1px solid rgba(255,248,231,.6);border-radius:999px;margin-left:.25rem}

/* Heroe: escena arriba (o al lado en escritorio), texto aparte sobre el cielo liso */
.hero{padding:.5rem 0 2rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:center;justify-items:center;text-align:center;width:min(1120px,100%);margin-inline:auto}
.scene{position:relative;width:min(100%,520px);aspect-ratio:1/.86}
.scene img{position:absolute;height:auto}
.scene .clouds{width:100%;left:0;top:8%;opacity:.85}
.scene .moon{width:42%;left:29%;top:0}
.scene .hill{width:100%;left:0;bottom:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.scene .tita{width:46%;left:27%;bottom:6%;animation:flotar 5s ease-in-out infinite}
.hero-copy{width:min(100% - 2rem,640px);padding-bottom:.5rem}
.hero-copy .wordmark{display:block;width:min(340px,80%);height:auto;margin:0 auto .5rem}
.hero h1{margin-top:0}
.lead{font-size:clamp(1.1rem,2.2vw,1.3rem);margin:0 0 1rem}
.hero-copy .lead:last-of-type{margin-bottom:1.5rem}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.6rem 1.4rem;border-radius:999px;background:var(--moon);color:var(--ink);font-weight:700;font-size:1.05rem;text-decoration:none;border:0}
a.button,.panel a.button,a.button:hover,.panel a.button:hover{color:var(--ink)}
a.button:hover{background:#fff1c4}
a.button:focus-visible{outline-color:var(--paper)}
.button-soon{cursor:default;background:var(--night-light);color:var(--moon);border:2px solid var(--moon)}

/* Secciones sobre el cielo */
.content{padding:1rem 0 3.5rem}
.panel{background:rgba(46,42,107,.92);border:1px solid rgba(179,157,219,.45);border-radius:24px;padding:clamp(1.25rem,4vw,2.75rem);margin:1.5rem auto;max-width:780px}
.panel h2{color:var(--moon);margin-top:0}
.panel a{color:var(--moon)}
.panel a:hover{color:#fff}
.panel li{margin:.4rem 0}
.panel>:last-child{margin-bottom:0}

/* Tarjeta destacada */
.feature{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center;gap:1.5rem;background:rgba(27,22,70,.7);border-radius:20px;padding:1.25rem 1.5rem;margin-top:1.25rem}
.feature-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.feature .logo{width:min(300px,100%);height:auto}
.feature .shot{width:190px;height:auto}

/* Capturas con marco de telefono */
.shot,.gallery img{aspect-ratio:1/2;object-fit:cover;background:var(--ink);border:7px solid var(--ink);border-radius:26px;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.gallery{display:flex;gap:1rem;width:fit-content;max-width:100%;margin:1.75rem auto;padding:.5rem .5rem 1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-color:var(--lilac) transparent}
.gallery img{flex:0 0 auto;width:200px;height:auto;scroll-snap-align:center}

/* Hoja crema: politica, condiciones, ayuda */
.prose{width:min(100%,46rem);margin:1rem auto 0;background:var(--paper);color:var(--ink);border-radius:20px;padding:clamp(1.25rem,5vw,3.25rem);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.prose{overflow-wrap:anywhere}
.prose h1,.prose h2,.prose h3{color:var(--night)}
.prose h1{margin-top:0}
.prose h2{scroll-margin-top:1rem}
.prose a{color:#453584}
.prose a:hover{color:var(--night)}
.prose :focus-visible{outline-color:#453584}
.prose li{margin:.35rem 0}
.effective{font-weight:700;color:#514665}
.toc{background:#EEE4CA;border-radius:14px;padding:1rem 1.25rem;margin:1.5rem 0}
.toc-title{margin:0 0 .25rem;font-family:var(--titulos);font-weight:600;color:var(--night)}
.toc ul{margin:0;padding-left:0;list-style:none}
.toc li{break-inside:avoid}
.toc a{display:flex;align-items:center;min-height:44px}
@media(min-width:720px){.toc ul{columns:2;column-gap:1.5rem}}
.prose details{border-top:1px solid #D7CEB8;padding:0}
.prose details:last-child{border-bottom:1px solid #D7CEB8}
.prose summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.5rem 0;cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;color:var(--night)}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:"+";font-size:1.6rem;line-height:1;color:#453584;flex:0 0 auto}
.prose details[open] summary::after{content:"\2013"}
.prose details>p,.prose details>ul,.prose details>ol{margin-top:0}
.prose details>:last-child{margin-bottom:1.1rem}

/* Pie */
.site-footer{border-top:1px solid rgba(179,157,219,.4);padding:1rem 0 2.5rem;font-size:.95rem}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 .25rem;list-style:none;margin:0;padding:0}
.footer-links li{display:inline-flex;align-items:center;min-height:48px}
.footer-links li+li::before{content:"\00b7";margin-right:.35rem}
.footer-links a{display:inline-flex;align-items:center;min-height:48px}
.credit{opacity:.8;font-size:.85rem;margin:.25rem 0 0}

/* 404 */
.hero-dormida{min-height:60vh;display:grid;place-items:center;text-align:center;padding:2rem 0}
.hero-dormida img{width:min(300px,70%);height:auto}

@keyframes flotar{50%{translate:0 -6px}}

/* Escritorio: escena y texto lado a lado */
@media(min-width:900px){
  .hero{padding:1.5rem 0 3rem}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3rem;text-align:left;justify-items:stretch}
  .hero-copy{width:auto;grid-column:1;grid-row:1;padding-left:1rem}
  .scene{grid-column:2;grid-row:1;width:100%;max-width:540px;justify-self:center}
  .hero-copy .wordmark{margin-left:0}
}
@media(max-width:620px){
  body{font-size:17px}
  .site-header{align-items:flex-start}
  .feature{grid-template-columns:1fr;justify-items:center;text-align:center}
  .feature-copy{align-items:center}
  .feature .shot{width:170px}
  .gallery img{width:164px}
  .panel{border-radius:18px;padding:1.25rem 1.1rem}
  .panel ul,.panel ol{padding-left:1.25rem}
  .scene{width:min(100%,400px)}
  .hero-copy .wordmark{width:min(280px,76%)}
  .prose{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene .tita{animation:none}
}