:root{
  --night:      #11142a;
  --panel:      #1b2046;
  --panel-alt:  #232a52;
  --dawn:       #f3a865;
  --dawn-soft:  #f7c694;
  --dusk:       #8d8ff0;
  --text:       #eef0fb;
  --muted:      #a7adcf;
  --border:     rgba(238,240,251,0.14);

  --display: 'Fraunces', serif;
  --body: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --container: 880px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  color:var(--text);
  background:
          radial-gradient(900px 500px at 18% 0%, rgba(141,143,240,0.16), transparent 60%),
          linear-gradient(180deg, var(--night) 0%, var(--night) 55%, #241c3a 80%, #3a2a3a 100%);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

hr{
  border:none;
  border-top:1px solid var(--border);
  margin:0;
}

a{ color:inherit; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--text);
}

p{ color:var(--muted); }

strong{ color:var(--text); font-weight:600; }

em{ font-style:italic; color:var(--dawn-soft); }

section{
  max-width:var(--container);
  margin:0 auto;
  padding:5rem 1.5rem;
}

:focus-visible{
  outline:2px solid var(--dawn);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ============ HEADER ============ */
header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(17,20,42,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
header h1{
  max-width:var(--container);
  margin:0 auto;
  padding:1.4rem 1.5rem 0;
  font-size:1.4rem;
  letter-spacing:.02em;
}
header h1::before{
  content:'';
  display:inline-block;
  width:.55em;
  height:.55em;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--dawn-soft), var(--dawn) 60%, transparent 75%);
  margin-right:.5em;
  vertical-align:middle;
  box-shadow:0 0 12px rgba(243,168,101,0.65);
}
header nav{
  max-width:var(--container);
  margin:0 auto;
  padding:.8rem 1.5rem 1.3rem;
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
header nav a{
  text-decoration:none;
  color:var(--muted);
  padding:.2rem 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
header nav a:hover{
  color:var(--dawn-soft);
  border-color:var(--dawn);
}
header hr{ display:none; }

/* ============ INICIO / HERO ============ */
#inicio{
  position:relative;
  padding-top:6rem;
  padding-bottom:7rem;
  overflow:hidden;
  text-align:center;
}

/* Signature element: circadian arc — a horizon line with a glowing
   orb that sits low (night) behind the hero, echoing the sleep → wake cycle */
#inicio::before{
  content:'';
  position:absolute;
  left:50%;
  top:-110px;
  width:520px;
  height:520px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(243,168,101,0.35), rgba(141,143,240,0.18) 45%, transparent 70%);
  filter:blur(2px);
  animation:driftOrb 10s ease-in-out infinite;
  pointer-events:none;
}
#inicio::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-1px;
  width:140%;
  height:160px;
  transform:translateX(-50%);
  border-radius:50% 50% 0 0;
  background:var(--night);
  box-shadow:0 -30px 60px -20px rgba(141,143,240,0.25);
  pointer-events:none;
}
@keyframes driftOrb{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(14px); }
}

#inicio h2{
  position:relative;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  max-width:14ch;
  margin:0 auto .6em;
}
#inicio > p{
  position:relative;
  max-width:46ch;
  margin:0 auto 2.2rem;
  font-size:1.08rem;
}
#inicio p:has(a){
  display:flex;
  gap:.9rem;
  justify-content:center;
  flex-wrap:wrap;
}
#inicio a{
  text-decoration:none;
  font-family:var(--mono);
  font-size:.85rem;
  letter-spacing:.03em;
  padding:.85rem 1.6rem;
  border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#inicio p:has(a) a:first-child{
  background:linear-gradient(135deg, var(--dawn), #e88a4a);
  color:#1a1230;
  font-weight:600;
  box-shadow:0 8px 24px -8px rgba(243,168,101,0.55);
}
#inicio p:has(a) a:last-child{
  border:1px solid var(--border);
  color:var(--text);
}
#inicio a:hover{ transform:translateY(-2px); }
#inicio hr{ display:none; }

/* ============ ESTADISTICAS ============ */
#estadisticas h3{
  font-size:1rem;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:1.5rem;
}
#estadisticas table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 .6rem;
}
#estadisticas thead{ display:none; }
#estadisticas td{
  border:1px solid var(--border);
  border-left:none;
  border-right:none;
  padding:1.1rem 1.2rem;
  background:var(--panel);
  vertical-align:middle;
}
#estadisticas tr td:first-child{
  border-left:1px solid var(--border);
  border-radius:10px 0 0 10px;
  color:var(--text);
  font-weight:600;
  width:34%;
}
#estadisticas tr td:last-child{
  border-right:1px solid var(--border);
  border-radius:0 10px 10px 0;
  color:var(--muted);
  font-size:.92rem;
}
#estadisticas tr td:nth-child(2){
  font-family:var(--mono);
  font-size:1.3rem;
  font-weight:600;
  color:var(--dawn-soft);
  white-space:nowrap;
}
#estadisticas hr{ display:none; }

/* ============ BENEFICIOS ============ */
#beneficios h2{ font-size:clamp(1.7rem,3.5vw,2.3rem); max-width:18ch; }
#beneficios > p{ max-width:55ch; margin-bottom:2.6rem; font-size:1.05rem; }

#beneficios{
  display:block;
}
#beneficios article{
  display:block;
  background:linear-gradient(160deg, var(--panel), var(--panel-alt));
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.8rem 1.9rem;
  margin-bottom:1.1rem;
  position:relative;
  overflow:hidden;
}
#beneficios article::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:4px; height:100%;
  background:linear-gradient(180deg, var(--dawn), var(--dusk));
}
#beneficios article h3{
  font-size:1.2rem;
  margin-bottom:.4rem;
}
#beneficios article p{ margin:0 0 .3rem; }
#beneficios article p em{
  display:inline-block;
  margin-top:.4rem;
  font-family:var(--mono);
  font-style:normal;
  font-size:.82rem;
  letter-spacing:.02em;
  background:rgba(243,168,101,0.12);
  border:1px solid rgba(243,168,101,0.3);
  padding:.3rem .7rem;
  border-radius:999px;
}
#beneficios hr{ display:none; }

@media (min-width:680px){
  #beneficios{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.1rem;
  }
  #beneficios h2, #beneficios > p, #beneficios hr{
    grid-column:1 / -1;
  }
  #beneficios article{ margin-bottom:0; }
}

/* ============ TIPS ============ */
#tips h2{ font-size:clamp(1.7rem,3.5vw,2.3rem); }
#tips h3{
  font-size:.95rem;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin:2.4rem 0 1rem;
}

/* Sleep-phase table styled as a composition bar — bar width keyed
   to the known content (REM 25 / Profundo 20 / Ligero 55) */
#tips table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
#tips thead th{
  text-align:left;
  font-family:var(--mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  background:var(--panel);
  padding:.8rem 1.1rem;
  font-weight:500;
}
#tips tbody td{
  padding:.95rem 1.1rem;
  border-top:1px solid var(--border);
  font-size:.95rem;
}
#tips tbody tr td:first-child{ font-weight:600; position:relative; padding-left:1.6rem; }
#tips tbody tr td:nth-child(2){ font-family:var(--mono); color:var(--dawn-soft); }
#tips tbody tr td:last-child{ color:var(--muted); }
#tips tbody tr:nth-child(1) td:first-child::before{ background:var(--dusk); }
#tips tbody tr:nth-child(2) td:first-child::before{ background:var(--dawn); }
#tips tbody tr:nth-child(3) td:first-child::before{ background:#5d6299; }
#tips tbody tr td:first-child::before{
  content:'';
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:8px; height:8px;
  border-radius:50%;
}

/* Habits list as a connected timeline */
#tips ol{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
#tips ol::before{
  content:'';
  position:absolute;
  left:17px;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--border);
}
#tips ol li{
  position:relative;
  padding:.2rem 0 1.6rem 3rem;
  counter-increment:habit;
}
#tips ol{ counter-reset:habit; }
#tips ol li::before{
  content:counter(habit);
  position:absolute;
  left:0;
  top:-.1rem;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--panel-alt);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--dawn-soft);
}
#tips ol li strong{
  display:block;
  margin-bottom:.2rem;
  font-family:var(--display);
  font-weight:500;
  font-size:1.05rem;
}
#tips ol li{ color:var(--muted); font-size:.96rem; }

#tips blockquote{
  margin:2.6rem 0 0;
  padding:1.4rem 1.7rem;
  border:1px solid rgba(243,168,101,0.3);
  background:rgba(243,168,101,0.07);
  border-radius:14px;
  font-family:var(--display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--text);
}
#tips hr{ display:none; }

/* ============ CONTACTO ============ */
#contacto{
  background:var(--panel);
  border-radius:24px;
  max-width:calc(var(--container) - 0px);
  margin-top:1rem;
}
#contacto h2{ font-size:clamp(1.7rem,3.5vw,2.3rem); }
#contacto > p{ max-width:50ch; margin-bottom:2rem; }

#contacto form{
  display:grid;
  gap:1.2rem;
  max-width:520px;
}
#contacto label{
  display:block;
  font-family:var(--mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin-bottom:.5rem;
}
#contacto input[type="text"],
#contacto input[type="email"],
#contacto select,
#contacto textarea{
  width:100%;
  background:var(--night);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.85rem 1rem;
  color:var(--text);
  font-family:var(--body);
  font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#contacto input::placeholder,
#contacto textarea::placeholder{ color:#6b7099; }
#contacto input:focus,
#contacto select:focus,
#contacto textarea:focus{
  border-color:var(--dawn);
  box-shadow:0 0 0 3px rgba(243,168,101,0.2);
  outline:none;
}
#contacto select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
#contacto textarea{ resize:vertical; min-height:100px; }
#contacto input[type="submit"]{
  justify-self:start;
  width:auto;
  cursor:pointer;
  border:none;
  background:linear-gradient(135deg, var(--dawn), #e88a4a);
  color:#1a1230;
  font-weight:700;
  font-family:var(--body);
  padding:.9rem 1.9rem;
  border-radius:999px;
  box-shadow:0 8px 24px -8px rgba(243,168,101,0.55);
  transition:transform .2s ease;
}
#contacto input[type="submit"]:hover{ transform:translateY(-2px); }
#contacto p:has(input[type="submit"]){ margin:0; }
#contacto hr{ display:none; }

/* ============ FOOTER ============ */
footer{
  text-align:center;
  padding:3rem 1.5rem 2.5rem;
  color:var(--muted);
  font-size:.85rem;
}
footer p{ margin:0 0 .6rem; color:var(--muted); }
footer nav a{
  text-decoration:none;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.03em;
}
footer nav a:hover{ color:var(--dawn-soft); }