/* =========================================================
   MART BEAUTY STUDIO — Hoja de estilos principal
   Tipografía: Playfair Display (display) + Jost (texto)
   Paleta:
     --blanco  #FFFFFF
     --negro   #111111
     --gris    #D9D9D9
     --nude    #E8D8CC
     --rosa    #E8AEB7
========================================================= */

:root{
  --blanco:#FFFFFF;
  --negro:#111111;
  --gris:#D9D9D9;
  --nude:#E8D8CC;
  --rosa:#E8AEB7;
  --rosa-suave:#f5dde1;

  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Jost', 'Segoe UI', sans-serif;

  --radio:18px;
  --sombra: 0 10px 30px rgba(17,17,17,.06);
  --transicion: .25s ease;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--negro);
  background-color:var(--blanco);
  font-size:1rem;
  line-height:1.7;
}

h1,h2,h3,h4,h5,.font-display{
  font-family:var(--font-display);
  letter-spacing:.02em;
}

a{ color:var(--negro); }
a:hover{ color:var(--rosa); }

/* =========================================================
   Utilidades de marca
========================================================= */
.text-rosa{ color:var(--rosa); }
.bg-nude{ background-color:var(--nude); }
.bg-rosa{ background-color:var(--rosa); }
.bg-negro{ background-color:var(--negro); color:var(--blanco); }
.bg-gris-suave{ background-color:#FAF8F6; }

.divider-rosa{
  width:64px;
  height:2px;
  background:var(--rosa);
  border:none;
  margin:.75rem auto 1.5rem;
}

.eyebrow{
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--rosa);
  font-weight:600;
}

.section-title{
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  font-weight:600;
  margin-bottom:.25rem;
}

.section-pad{
  padding:5rem 0;
}
@media (max-width:767.98px){
  .section-pad{ padding:3rem 0; }
}

/* =========================================================
   Barra superior (topbar)
========================================================= */
.topbar{
  background:var(--negro);
  color:var(--rosa-suave);
  font-size:.8rem;
  letter-spacing:.06em;
}
.topbar a{
  color:var(--rosa-suave);
  text-decoration:none;
}
.topbar a:hover{ color:var(--rosa); }
.topbar .separador{
  color:var(--gris);
  opacity:.4;
}

/* =========================================================
   Navbar
========================================================= */
.navbar-mart{
  background:var(--blanco);
  padding-top:.9rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--gris);
}
.navbar-mart .navbar-brand img{
  height:46px;
  width:auto;
}
.navbar-mart .navbar-brand .marca-texto{
  font-family:var(--font-display);
  font-size:1.55rem;
  letter-spacing:.08em;
  font-weight:700;
  color:var(--negro);
  line-height:1;
}
.navbar-mart .navbar-brand .marca-sub{
  font-family:var(--font-body);
  font-size:.62rem;
  letter-spacing:.32em;
  color:var(--rosa);
  text-transform:uppercase;
}
.navbar-mart .nav-link{
  font-family:var(--font-body);
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--negro);
  font-weight:500;
  padding:.5rem 1rem !important;
  position:relative;
}
.navbar-mart .nav-link.active,
.navbar-mart .nav-link:hover{
  color:var(--rosa);
}
.navbar-mart .nav-link.active::after{
  content:"";
  position:absolute;
  left:1rem; right:1rem; bottom:.1rem;
  height:2px;
  background:var(--rosa);
}
.btn-reserva{
  background:var(--negro);
  color:var(--blanco);
  border:1px solid var(--negro);
  border-radius:50px;
  padding:.6rem 1.6rem;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  transition:var(--transicion);
}
.btn-reserva:hover{
  background:var(--rosa);
  border-color:var(--rosa);
  color:var(--negro);
}
.btn-outline-mart{
  background:transparent;
  color:var(--negro);
  border:1px solid var(--negro);
  border-radius:50px;
  padding:.6rem 1.6rem;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  transition:var(--transicion);
}
.btn-outline-mart:hover{
  background:var(--negro);
  color:var(--blanco);
}
.btn-rosa{
  background:var(--rosa);
  color:var(--negro);
  border:1px solid var(--rosa);
  border-radius:50px;
  padding:.6rem 1.6rem;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  transition:var(--transicion);
}
.btn-rosa:hover{
  background:var(--negro);
  border-color:var(--negro);
  color:var(--blanco);
}

/* Botón flotante carrito (icono) */
.btn-carrito{
  position:relative;
  border:1px solid var(--gris);
  background:var(--blanco);
  border-radius:50%;
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:var(--transicion);
}
.btn-carrito:hover{
  border-color:var(--rosa);
  background:var(--rosa-suave);
}
.btn-carrito .badge-carrito{
  position:absolute;
  top:-6px; right:-6px;
  background:var(--rosa);
  color:var(--negro);
  font-size:.68rem;
  font-weight:700;
  min-width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--blanco);
}

/* =========================================================
   Hero / Carrusel principal
========================================================= */
.hero{
  position:relative;
  background:var(--nude);
  overflow:hidden;
}
.hero-carrusel .carousel-item{
  height: clamp(420px, 70vh, 680px);
}
.hero-carrusel .carousel-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.62);
}
.hero-texto{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
}
.hero-texto .contenido{
  color:var(--blanco);
  max-width:620px;
}
.hero-texto .eyebrow{ color:var(--rosa); }
.hero-texto h1{
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  line-height:1.1;
  margin-bottom:1rem;
}
.hero-texto p{
  font-size:1.05rem;
  opacity:.92;
}
.carousel-indicators [data-bs-target]{
  background-color:var(--rosa);
}

/* Bloque de ubicación / frase sobre el hero (estilo sitemap) */
.franja-ubicacion{
  background:var(--blanco);
  border-bottom:1px solid var(--gris);
}
.franja-ubicacion .pin{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--rosa-suave);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.franja-ubicacion .frase{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--negro);
}

/* =========================================================
   Tarjetas genéricas
========================================================= */
.card-mart{
  border:1px solid var(--gris);
  border-radius:var(--radio);
  background:var(--blanco);
  transition:var(--transicion);
  height:100%;
}
.card-mart:hover{
  box-shadow:var(--sombra);
  transform:translateY(-4px);
  border-color:var(--rosa);
}
.card-mart .card-body{ padding:1.6rem; }

.icono-circulo{
  width:64px; height:64px;
  border-radius:50%;
  background:var(--rosa-suave);
  display:flex; align-items:center; justify-content:center;
  color:var(--negro);
  margin-bottom:1rem;
}
.icono-circulo svg{ width:28px; height:28px; }

/* Categorías de servicio (estilo mapa del sitio) */
/* Categorías de servicio (estilo mapa del sitio) */
.categoria-tarjeta{
  padding:0;
  background:var(--blanco);
  cursor:pointer;
  font-family:inherit;
}
.categoria-tarjeta:focus-visible{
  outline:2px solid var(--rosa);
  outline-offset:2px;
}

.categoria-pill{
  border:1px solid var(--gris);
  border-radius:50px;
  padding:.55rem 1.4rem;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  background:var(--blanco);
  color:var(--negro);
  transition:var(--transicion);
  cursor:pointer;
}
.categoria-pill.activa,
.categoria-pill:hover{
  background:var(--negro);
  color:var(--blanco);
  border-color:var(--negro);
}

/* =========================================================
   Tienda de servicios / Productos
========================================================= */
.producto-card{
  border:1px solid var(--gris);
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--blanco);
  transition:var(--transicion);
  height:100%;
  display:flex;
  flex-direction:column;
}
.producto-card:hover{
  box-shadow:var(--sombra);
  transform:translateY(-4px);
  border-color:var(--rosa);
}
.producto-imagen{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--nude);
}
.producto-imagen img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.producto-card:hover .producto-imagen img{
  transform:scale(1.06);
}
.producto-imagen .sin-imagen{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:var(--rosa);
  background:linear-gradient(135deg, var(--nude), var(--rosa-suave));
}
.producto-imagen .sin-imagen svg{ width:46px; height:46px; }

/* Etiqueta de precio estilo "tag" de tienda */
.tag-precio{
  position:absolute;
  top:14px; right:-8px;
  background:var(--negro);
  color:var(--blanco);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  padding:.35rem .9rem .35rem 1.1rem;
  border-radius:4px 0 0 4px;
  box-shadow:var(--sombra);
}
.tag-precio::after{
  content:"";
  position:absolute;
  right:-9px; top:0;
  border-style:solid;
  border-width:0 9px 9px 0;
  border-color: transparent var(--negro) transparent transparent;
  transform:rotate(0deg);
  display:none;
}
.tag-precio .punto{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--rosa);
  margin-right:.4rem;
}

.producto-cuerpo{
  padding:1.25rem 1.25rem 1.4rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.producto-categoria{
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--rosa);
  font-weight:700;
  margin-bottom:.35rem;
}
.producto-nombre{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:.4rem;
}
.producto-descripcion{
  font-size:.85rem;
  color:#555;
  flex:1;
  margin-bottom:1rem;
}
.btn-agregar{
  width:100%;
  border:1px solid var(--negro);
  background:var(--blanco);
  color:var(--negro);
  border-radius:50px;
  padding:.55rem 1rem;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  transition:var(--transicion);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.btn-agregar:hover{
  background:var(--negro);
  color:var(--blanco);
}
.btn-agregar.agregado{
  background:var(--rosa);
  border-color:var(--rosa);
  color:var(--negro);
}

/* Offcanvas carrito */
.offcanvas-carrito .offcanvas-header{
  border-bottom:1px solid var(--gris);
}
.offcanvas-carrito .offcanvas-title{
  font-family:var(--font-display);
}
.item-carrito{
  display:flex;
  gap:.9rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--gris);
}
.item-carrito img{
  width:64px; height:64px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0;
  background:var(--nude);
}
.item-carrito .sin-imagen-mini{
  width:64px; height:64px;
  border-radius:10px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--nude), var(--rosa-suave));
  color:var(--rosa);
}
.item-carrito .sin-imagen-mini svg{ width:24px; height:24px; }
.item-carrito .nombre{
  font-weight:600;
  font-size:.92rem;
}
.item-carrito .precio-unit{
  font-size:.78rem;
  color:#777;
}
.cantidad-control{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--gris);
  border-radius:50px;
  overflow:hidden;
}
.cantidad-control button{
  border:none;
  background:var(--blanco);
  width:28px; height:28px;
  font-size:1rem;
  line-height:1;
  color:var(--negro);
}
.cantidad-control button:hover{ background:var(--rosa-suave); }
.cantidad-control .valor{
  width:32px;
  text-align:center;
  font-size:.85rem;
  font-weight:600;
}
.btn-eliminar{
  border:none;
  background:transparent;
  color:#aaa;
}
.btn-eliminar:hover{ color:var(--rosa); }

.carrito-vacio{
  text-align:center;
  padding:3rem 1rem;
  color:#888;
}
.carrito-vacio svg{ width:56px; height:56px; color:var(--gris); margin-bottom:1rem; }

/* =========================================================
   Bloques de info (Inicio / Nosotros / Contacto)
========================================================= */
.lista-iconos li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  margin-bottom:1.1rem;
}
.lista-iconos .icono-mini{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--rosa-suave);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.lista-iconos .icono-mini svg{ width:18px; height:18px; }

.testimonio-card{
  background:var(--bg-gris-suave, #FAF8F6);
  border:1px solid var(--gris);
  border-radius:var(--radio);
  padding:1.6rem;
  height:100%;
}
.testimonio-card .estrellas{ color:var(--rosa); letter-spacing:.2em; }

.valor-item{
  text-align:center;
  padding:1.5rem 1rem;
}

/* Sello / firma de marca circular (elemento distintivo) */
.sello-marca{
  position:relative;
  width:180px; height:180px;
  border:1px solid var(--negro);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.sello-marca::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px dashed var(--rosa);
  border-radius:50%;
}
.sello-marca .interior{
  text-align:center;
  font-family:var(--font-display);
  line-height:1.2;
}
.sello-marca .interior .grande{
  font-size:2.4rem;
  font-weight:700;
  display:block;
}
.sello-marca .interior .chico{
  font-size:.6rem;
  letter-spacing:.28em;
  text-transform:uppercase;
}

/* =========================================================
   Footer
========================================================= */
.footer-mart{
  background:var(--negro);
  color:var(--gris);
}
.footer-mart h6{
  color:var(--blanco);
  font-family:var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.85rem;
  margin-bottom:1.1rem;
}
.footer-mart a{
  color:var(--gris);
  text-decoration:none;
  font-size:.9rem;
}
.footer-mart a:hover{ color:var(--rosa); }
.footer-mart .marca-footer{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--blanco);
  letter-spacing:.1em;
}
.footer-mart .marca-footer span{ color:var(--rosa); }
.footer-mart .redes a{
  display:inline-flex;
  width:38px; height:38px;
  border:1px solid #333;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  margin-right:.5rem;
}
.footer-mart .redes a:hover{
  border-color:var(--rosa);
  background:var(--rosa);
  color:var(--negro);
}
.footer-mart .redes svg{ width:16px; height:16px; }
.footer-mart hr{ border-color:#2a2a2a; }
.footer-bottom{
  font-size:.8rem;
  color:#888;
}

/* =========================================================
   Páginas internas (encabezado de sección)
========================================================= */
.encabezado-pagina{
  background:var(--nude);
  padding:3.5rem 0 3rem;
  text-align:center;
}
.encabezado-pagina h1{
  font-size:clamp(2rem, 5vw, 3rem);
}
.breadcrumb-mart{
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#777;
}
.breadcrumb-mart a{ color:#777; text-decoration:none; }
.breadcrumb-mart a:hover{ color:var(--rosa); }
.breadcrumb-mart .activo{ color:var(--negro); font-weight:600; }

/* =========================================================
   Formularios
========================================================= */
.form-mart .form-control,
.form-mart .form-select{
  border:1px solid var(--gris);
  border-radius:10px;
  padding:.7rem 1rem;
  font-size:.92rem;
}
.form-mart .form-control:focus,
.form-mart .form-select:focus{
  border-color:var(--rosa);
  box-shadow:0 0 0 .2rem rgba(232,174,183,.25);
}
.form-mart label{
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:.35rem;
}

/* =========================================================
   Toast de confirmación
========================================================= */
.toast-mart{
  position:fixed;
  bottom:24px; right:24px;
  background:var(--negro);
  color:var(--blanco);
  padding:.9rem 1.4rem;
  border-radius:50px;
  font-size:.85rem;
  letter-spacing:.05em;
  display:flex;
  align-items:center;
  gap:.6rem;
  box-shadow:var(--sombra);
  transform:translateY(20px);
  opacity:0;
  pointer-events:none;
  transition:all .35s ease;
  z-index:2000;
}
.toast-mart.mostrar{
  transform:translateY(0);
  opacity:1;
}
.toast-mart svg{ color:var(--rosa); width:18px; height:18px; }

/* Accesibilidad: foco visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--rosa);
  outline-offset:2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}