/* ===== Variables y base ===== */
:root{
  --brand:#800080;
  --brand-90:rgba(128,0,128,.92);
  --bg:#fff;
  --text:#111;
  --muted:#666;
  --card:#f7f7f9;
  --radius:16px;
  --shadow:0 6px 16px rgba(0,0,0,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; /* iOS: NO auto-agrandar texto */
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}

/* ===== Header centrado ===== */
.header{
  position:sticky; top:0; z-index:50;
  background:var(--brand-90); color:#fff;
  box-shadow:var(--shadow);
}
.header-top{
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:10px 0;
}
.logo{
  width:50px; height:50px;
  opacity:0; transform:scale(.8);
  animation:logoZoom 1s ease forwards;
}
@keyframes logoZoom{ to{ opacity:1; transform:scale(1);} }

.site-title{
  font-size:25px; margin:0; color:#fff; font-weight:bold; text-align:center;
  opacity:0; transform:translateY(10px);
  animation:titleSlide 1s ease forwards; animation-delay:.4s;
}
@keyframes titleSlide{ to{ opacity:1; transform:translateY(0);} }

/* ===== Nav visible, sin hamburguesa ===== */
.nav{
  display:flex; 
  flex-wrap:nowrap; 
  justify-content:center;
  gap:16px; 
  background:var(--brand); 
  padding:8px 12px;
  overflow-x: auto; /* por si en pantallas muy chicas no cabe, que permita deslizar */
}

.nav-link{
  white-space: nowrap; /* evita que las palabras se partan */
  color:#fff;
  text-decoration:none;
  font-size:clamp(14px,4vw,17px); /* Más grandes sin romper diseño */
  padding:4px 0;
  position:relative;
}
/* subrayado animado */
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:#fff; transition:width .3s;
}
.nav-link:hover::after{ width:100%; }

/* iPhone chico: 2 filas centradas (evita que se corte “Contacto”) */
@media (max-width:414px){
  .nav{ display:grid; grid-template-columns:repeat(2,auto); justify-content:center; gap:10px 18px; }
  .nav-link{ text-align:center; }
}
/* Aún más chico (SE/mini) */
@media (max-width:360px){
  .site-title{ font-size:20px; }
  .nav-link{ font-size:clamp(12px,3.8vw,14px); }
}

/* ===== Portada (imagen de fondo) ===== */
.hero{
  position:relative; min-height:56vh;
  display:grid; place-items:center; text-align:center; color:#fff;
  background:url('img/lugar.webp') center/cover no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
}
.hero-content{ position:relative; padding:36px 16px; }

/* “Bienvenidos” con giro elegante y queda visible */
.hero-content h2{
  margin:0 0 8px; font-size:50px;
  opacity:0; transform:translateX(-50px) rotate(0deg);
  animation:bienvenidosIn 1s ease-out forwards;
}
@keyframes bienvenidosIn{
  0%{ opacity:0; transform:translateX(-50px) rotate(0deg); }
  70%{ opacity:1; transform:translateX(0) rotate(360deg); }
  100%{ opacity:1; transform:translateX(0) rotate(360deg); }
}

/* Tagline en botón redondeado + fade suave (no rota) */
.hero-content p{
  margin:0 0 8px; color:#fff; font-size:20px;
  opacity:0; transform:translateY(8px);
  animation:taglineIn .6s ease-out .2s forwards;
}
@keyframes taglineIn{ to{ opacity:1; transform:translateY(0); } }

.btn{
  display:inline-block; padding:10px 14px; border-radius:999px;
  border:1px solid #fff; background:transparent; color:#fff;
}
.btn-primary{ background:var(--brand); border-color:transparent; }
.btn:active{ transform:scale(.98); }

/* Botón morado para el tagline */
.tagline-btn{
  display:inline-block; background:var(--brand); color:#fff;
  padding:10px 18px; border-radius:50px; font-size:14px; font-weight:600; margin-top:8px;
}

/* ===== Secciones ===== */
.section{ padding:22px 0; scroll-margin-top:70px; }
.section-title{ font-size:30px; 
  margin:0 0 8px; 
  text-align: center;
  text-decoration: underline;
}

/* ===== Galería con pestañas (solo HTML+CSS) ===== */
.tabs{ display:block; }
.tabs input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }

.tab-btn{
  display:inline-block; margin-right:8px; padding:8px 12px;
  border-radius:999px; border:1px solid #e5e5ea; background:#fff; color:var(--text);
}
#tab-unas:checked + label.tab-btn{ background:var(--brand); color:#fff; border-color:transparent; }
#tab-cabello:checked + label.tab-btn{ background:var(--brand); color:#fff; border-color:transparent; }

.panels{ margin-top:12px; }
.panel{ display:none; }
#tab-unas:checked ~ .panels #panel-unas{ display:block; }
#tab-cabello:checked ~ .panels #panel-cabello{ display:block; }

/* Grid de imágenes */
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.grid-item{ border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }

/* ===== Contacto ===== */
.contacto-info {
  text-align: center;
  font-weight: bold;
  font-size: 20PX;
}

.direccion a {
  color: inherit; /* usa el mismo color del texto */
  text-decoration: none; /* sin subrayado */
  font-weight: bold;
}

.direccion a:hover {
  text-decoration: underline; /* subrayado bonito al pasar el mouse */
}

.address{ margin:0 0 10px; color:var(--muted); }
.address a{ color:inherit; text-decoration:underline; }
.contact-actions{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 14px; }
.chip{ display:inline-block; padding:8px 12px; border-radius:999px; background:var(--brand); color:#fff; border:1px solid transparent; }
.chip:active{ transform:scale(.98); }
.map{ 
  position:relative; 
  width:100%; 
  aspect-ratio:16/9; 
  border-radius:12px; 
  overflow:hidden; 
  box-shadow:var(--shadow); 
  margin:0 0 14px; 
}

.map iframe{ 
   margin-top: 5px;
  position:absolute; 
  inset:0; width:100%; 
  height:100%; 
  border:0; 
}

.contact-form{
  display:grid; gap:10px; background:var(--card);
  padding:14px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.form-title{ margin:0 0 6px; font-size:18px; }
.contact-form label{ display:grid; gap:6px; }
.contact-form input, .contact-form select{
  width:100%; padding:12px; border-radius:12px; border:1px solid #e9e9ee; background:#fff;
}
.contact-form .btn{ margin-top:4px; }
.form-msg{ min-height:18px; font-size:13px; color:var(--muted); margin:4px 0 0; }

/* ===== Redes (limpio) ===== */
.socials {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 16px 0 26px;
}

.s {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.s:hover{ transform:scale(1.12); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.s:active{ transform:scale(.96); filter:brightness(.95); }

/* Colores por red */
.fb{ background:#1877f2; }
.ig{ background:radial-gradient(circle at 30% 30%, #f58529, #dd2a7b, #8134af, #515bd4); }
.tk{ background:#000; }
.wa{ background:#25d366; }

/* Pulso suave */
@keyframes pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}

/* Respeto a accesibilidad: sin animaciones si el usuario las desactiva */
@media (prefers-reduced-motion: reduce){
  .s{ animation:none; transition:none; }
}

/* (Bonus) Si quieres mostrar un ícono simple sin librerías,
   puedes usar un pseudo-elemento con emoji: */
/*
.fb::before{ content:'f'; font-weight:700; }
.ig::before{ content:'◐'; }
.tk::before{ content:'♪'; }
.wa::before{ content:'✆'; }
*/

/* ======== SERVICIOS ======== */
.servicios {
  padding: 20px 10px;
  background: #f7f7fb;
  text-align: center;
}

.servicios h2 {
  font-size: 1.6rem;
  margin: 0 0 14px;
  text-decoration: underline; /* solo subraya el título */
}

.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-card {
  margin-bottom: 16px;
  width: 100%;
  max-width: 95%; /* margen suave en lados */
  background: var(--card-bg, #fff);
  border-radius: var(--radius, 16px);
  padding: 20px;
  box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.08));
  border: 1px solid rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}

.service-card:last-child {
  margin-bottom: 0; /* la última sin margen extra */
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.service-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text, #111);
  margin: 0 0 6px;
  text-align: center;
}

.service-sub {
  font-size: .95rem;
  color: var(--muted, #6b7280);
  margin: 0 0 8px;
  text-align: center;
  text-decoration: none; /* quita subrayado */
}

.service-sub a {
  text-decoration: none;
  color: inherit;
}

.service-price {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--accent, #ff7a00);
  text-align: center;
}

.service-card ul {
  list-style: none; /* quitamos viñetas nativas */
  padding: 0;
  margin: 0;
}

.service-card ul li {
  margin: 6px 0; /* espacio uniforme */
  font-size: 1.1rem;
}

.service-card ul li::before {
  content: "•"; /* puedes cambiarlo por ✓ o ★ */
  color: var(--accent, #ff7a00);
  font-weight: bold;
  margin-right: 6px;
}

.horario {
  text-align: center;
  margin: 30px 0;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.horario h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
  text-decoration: underline;
}

.horario ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.horario li {
  font-size: 1.1rem;
  margin: 5px 0;
}