/* =========================================
   Miss Express — style.css (FONDO ROSADO, PÁRRAFOS MORADOS, BANNER COMPLETO)
   ========================================= */
:root{
  /* Paleta del usuario */
  --soft:#F29BBB;      /* rosa suave */
  --secondary:#F252C8; /* rosa intermedio */
  --primary:#F205CB;   /* magenta (CTA, títulos) */
  --accent:#AB04D9;    /* morado (links, párrafos) */
  --success:#38F205;   /* verde (opcional) */

  /* Layout/derivados */
  --bg:#FFF0F6;        /* fondo rosado */
  --surface:#38F205;   /* verde (para nav/footer si se usa) */
  --ink:#AB04D9;       /* texto principal violeta */
  --muted:#F29BBB;     /* texto secundario suave */
  --line:#F29BBB;

  --radius:16px;
  --maxw:980px;        /* ancho del banner y secciones */
  --navw:760px;        /* NAV MÁS ESTRECHO que el banner */
}

/* Base y centrado */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height:1.6;
}

/* Contenedor y CENTRADO de secciones */
header .banner, footer .inner, main > section{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
  text-align:center;
}
/* Menos espacio vertical */
main > section{ padding:32px 0; }
@media (max-width:640px){ main > section{ padding:24px 0; } }

/* Párrafos en MORADO (todos) */
p{ color: var(--accent); margin:.5em 0; }

/* Títulos y enlaces */
h1,h2{margin:0 0 .6em; line-height:1.2}
h1{font-size:clamp(28px,5vw,40px); color:var(--primary)}
h2{font-size:clamp(22px,4vw,28px); color:var(--primary)}

a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:2px solid rgba(171,4,217,.35);
  padding-bottom:2px;
}
a:hover{ color:var(--primary); border-color:rgba(242,5,203,.55) }

/* HEADER: banner completo (full-bleed) */
header{
  border-bottom:2px solid var(--line);
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(242,82,200,.25), transparent 60%), /* secondary */
    radial-gradient(1000px 500px at -10% 0%, rgba(171,4,217,.22), transparent 60%),   /* accent */
    linear-gradient(180deg, #FFE2EE 0%, transparent 70%);
}
header .banner{ padding:44px 20px 52px; }

/* NAV: MÁS ESTRECHO que el banner, no tan centrado */
nav{
  background:var(--surface);
  border-top:2px solid var(--line);
}
nav .menu{
  list-style:none;
  display:flex;
  gap:20px;
  margin:0 auto;
  padding:10px 16px;
  max-width:var(--navw);   /* <-- más estrecho que el banner */
  width:100%;
  justify-content:space-evenly; /* reparte sin irse a los bordes ni quedar ultra centrado */
  align-items:center;
  flex-wrap:wrap;
}
@media (max-width:800px){
  nav .menu{ justify-content:center; gap:16px; }
}
/* ENLACES: texto en var(--ink) como te gusta */
nav .menu a{
  color:var(--ink);
  font-weight:700;
  padding:6px 12px;
  border-radius:10px;
  text-decoration:none;
}
/* Hover rosado suave */
nav .menu a:hover{ background:rgba(242,155,187,.35) } /* soft */

/* Servicios: lista centrada visualmente, alineada a la izq. para leer mejor */
#servicios ul{
  list-style:disc; padding-left:20px; margin:12px auto 0;
  display:inline-block; text-align:left; color:var(--ink);
}
#servicios li{ margin:.25rem 0 }

/* Botones (gradiente de tu paleta; base blanca) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px;
  border:2px solid var(--primary);
  background:#38F205;
  color:var(--primary);
  font-weight:800; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(242,82,200,.18);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(242,82,200,.24) }
.btn.primary{
  border-color:transparent;
  color:#38F205;
  background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 45%, var(--accent) 100%);
}

/* Footer */
footer{
  border-top:2px solid var(--line);
  background:var(--surface);
  color:#38F205;
  font-size:14px;
}
footer .inner{ padding:16px 20px }