/* Las fuentes se cargan en includes/head.php (Familjen Grotesk + Manrope).
   Aca habia un @import de Cormorant Garamond y Raleway que ya no se usan:
   descargaba dos familias enteras al pedo y frenaba el pintado de la pagina. */

/* 1. Reset & Base */
:root {
  /* Brand colors */
  --mek-fucsia: #D74289;
  --mek-fucsia-dark: #A8306A;

  /* Variantes de contraste — no cambiar sin recalcular.
     El fucsia de marca (#D74289) no llega al minimo de contraste en texto chico.
     texto        -> fucsia oscurecido para texto chico sobre fondo claro   (6,07 sobre hueso)
     sobre-oscuro -> fucsia aclarado para texto chico sobre fondo ciruela   (8,24 sobre ciruela)
     fondo        -> fucsia oscurecido para fondos con texto blanco encima  (4,67 con blanco) */
  --mek-fucsia-texto: #A8306A;
  --mek-fucsia-sobre-oscuro: #F79ECA;
  --mek-fucsia-fondo: #CC3C7A;
  --mek-hueso: #FAF8F5;
  --mek-nude: #F3E7E9;
  --mek-carbon: #2E2A2C;
  --mek-blanco: #FFFFFF;

  /* Semantic grays */
  --mek-gris-100: #F5F3F4;
  --mek-gris-300: #D5D0D2;
  --mek-gris-500: #8A8486;
  --mek-gris-700: #4A4648;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Raleway', 'Segoe UI', sans-serif;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Radii and shadows */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(46,42,44,0.06);
  --shadow-md: 0 4px 16px rgba(46,42,44,0.08);
  --shadow-lg: 0 8px 32px rgba(46,42,44,0.10);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-normal: 350ms;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.6;
  font-family: var(--font-body);
  background-color: var(--mek-hueso);
  color: var(--mek-carbon);
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[role="list"], ol[role="list"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 2. Typography */
h1, h2, .hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
h3 { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 600; letter-spacing: -0.01em; }
body { font-size: clamp(0.9375rem, 1vw + 0.5rem, 1.0625rem); }

.visually-hidden,
.skip-to-content:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-to-content:focus {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-sm);
  background: var(--mek-fucsia-fondo);
  color: var(--mek-blanco);
  z-index: 9999;
}

/* 3. Layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-wide {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-3xl);
}

.section--nude {
  background-color: var(--mek-nude);
}

.section--carbon {
  background-color: var(--mek-carbon);
  color: var(--mek-blanco);
}

.section--hueso {
  background-color: var(--mek-hueso);
}

/* 4. Trust Bar */
.trust-bar {
  background-color: var(--mek-carbon);
  color: var(--mek-blanco);
  font-size: 0.875rem;
  padding-block: var(--space-xs);
  text-align: center;
}

.trust-bar__container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .trust-bar__item:not(:first-child) {
    display: none;
  }
}

/* 5. Header & Navigation */
.main-header {
  position: sticky;
  top: 0;
  background-color: var(--mek-blanco);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
  transition: padding var(--duration-fast) var(--ease-out);
  padding-block: var(--space-sm);
}

.main-header.scrolled {
  padding-block: var(--space-xs);
}

.main-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-link {
  font-weight: 600;
  color: var(--mek-carbon);
  position: relative;
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--mek-fucsia-fondo);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-fast) var(--ease-out);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.hamburger__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--mek-carbon);
  margin-block: 5px;
  transition: all var(--duration-fast) var(--ease-out);
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  max-width: 400px;
  background-color: var(--mek-blanco);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

@media (max-width: 767px) {
  .hamburger {
    display: block;
  }
  .desktop-nav {
    display: none;
  }
}

@media (min-width: 768px) {
  .desktop-nav {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
  }
}

/* 6. Hero */
.hero {
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mek-carbon);
  color: var(--mek-blanco);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--space-3xl);
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  z-index: 0;
}

.hero--no-image {
  background-color: var(--mek-carbon);
}

.hero--no-image .hero__title {
  text-shadow: none;
}


.hero__content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero__title {
  color: var(--mek-blanco);
  margin-bottom: var(--space-md);
}

.hero__subtitle {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-xl);
  font-size: 1.125rem;
}

.hero__indicators {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

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

.hero__indicator-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
}

.hero__indicator-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* 7. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
  border: none;
  text-align: center;
}

.btn--primary {
  background-color: var(--mek-fucsia-fondo);
  color: var(--mek-blanco);
}

.btn--primary:hover {
  background-color: var(--mek-fucsia-dark);
}

.btn--outline {
  background-color: transparent;
  border: 2px solid var(--mek-carbon);
  color: var(--mek-carbon);
}

.btn--outline:hover {
  background-color: var(--mek-carbon);
  color: var(--mek-blanco);
}

.section--carbon .btn--outline {
  border-color: var(--mek-blanco);
  color: var(--mek-blanco);
}

.section--carbon .btn--outline:hover {
  background-color: var(--mek-blanco);
  color: var(--mek-carbon);
}

.btn--whatsapp {
  background-color: #25D366;
  color: var(--mek-blanco);
  gap: 8px;
}

.btn--whatsapp:hover {
  background-color: #128C7E;
}

.btn--lg {
  padding: 18px 36px;
  font-size: 1.125rem;
}

.btn--full {
  width: 100%;
}

/* 8. Cards */
.card {
  background-color: var(--mek-blanco);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-fast) var(--ease-out);
  color: var(--mek-carbon);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-tratamiento__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.card-tratamiento__placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background-color: var(--mek-nude);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--space-md);
  text-align: center;
}

.card-tratamiento__placeholder-title {
  font-family: var(--font-display);
  color: var(--mek-carbon);
  margin-top: var(--space-sm);
}

.card-tratamiento__placeholder svg {
  color: var(--mek-fucsia);
  width: 48px;
  height: 48px;
}

.card-tratamiento__content {
  padding: var(--space-md);
}

.card-testimonio {
  padding: var(--space-md);
}

.card-testimonio__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.card-testimonio__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.card-testimonio__stars {
  color: #FFB400;
}

.card-promo {
  padding: var(--space-md);
  border: 2px solid var(--mek-fucsia);
}

.card-objetivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  background-color: var(--mek-blanco);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
  height: 100%;
}

.card-objetivo:hover {
  border-color: var(--mek-nude);
  transform: translateY(-4px);
}

.card-objetivo.active {
  border-color: var(--mek-fucsia);
}

.card-objetivo svg {
  width: 40px;
  height: 40px;
  color: var(--mek-fucsia);
  margin-bottom: var(--space-sm);
}

.card-belleza {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  gap: var(--space-md);
}

.card-equipo__img {
  width: 100%;
  aspect-ratio: 1/1;
  background-color: var(--mek-nude);
  object-fit: cover;
}

.card-equipo__content {
  padding: var(--space-md);
}

/* 9. Objetivos Filter */
.objetivos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 1024px) {
  .objetivos-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}

/* 10. Before/After Comparator */
.ba-slider { position: relative; overflow: hidden; border-radius: 8px; }
.ba-slider img { width: 100%; display: block; object-fit: cover; }
.ba-antes { position: absolute; top: 0; left: 0; clip-path: polygon(0 0, var(--pos, 50%) 0, var(--pos, 50%) 100%, 0 100%); }
.ba-slider input[type="range"] { position: absolute; inset: 0; opacity: 0; cursor: ew-resize; width: 100%; height: 100%; z-index: 10; margin: 0; }
.ba-label { position: absolute; bottom: 1rem; padding: 0.25rem 0.75rem; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.875rem; border-radius: 4px; pointer-events: none; z-index: 5; }
.ba-label--antes { left: 1rem; } .ba-label--despues { right: 1rem; }

/* Keep old comparador if needed but here we replaced it with the requested slider logic */

/* 11. Carousel */
.carousel-wrapper {
  position: relative;
}

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel__item {
  scroll-snap-align: start;
  flex: 0 0 85%;
}

@media (min-width: 768px) {
  .carousel__item {
    flex: 0 0 calc(50% - var(--space-md) / 2);
  }
}

@media (min-width: 1024px) {
  .carousel__item {
    flex: 0 0 calc(33.333% - var(--space-md) * 2 / 3);
  }
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--mek-blanco);
  border: none;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mek-carbon);
}

.carousel__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.carousel__btn--prev { left: calc(var(--space-md) * -1); }
.carousel__btn--next { right: calc(var(--space-md) * -1); }

@media (max-width: 1023px) {
  .carousel__btn { display: none; }
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-md);
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--mek-gris-300);
  border: none;
  cursor: pointer;
  padding: 0;
}

.carousel__dot.active {
  background-color: var(--mek-fucsia-fondo);
}

/* 12. Accordion */
.accordion__item {
  border-bottom: 1px solid var(--mek-gris-300);
}

.accordion__trigger {
  list-style: none;
  padding: var(--space-md) 0;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion__trigger::-webkit-details-marker {
  display: none;
}

.accordion__trigger::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232E2A2C'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--duration-fast) var(--ease-out);
}

details[open] .accordion__trigger::after {
  transform: rotate(180deg);
}

.accordion__content {
  padding-bottom: var(--space-md);
  color: var(--mek-gris-700);
}

/* 13. Forms */
.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--mek-gris-300);
  border-radius: var(--radius-sm);
  background-color: var(--mek-blanco);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--mek-fucsia);
  box-shadow: 0 0 0 2px rgba(215, 66, 137, 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-error {
  color: #DC2626;
  font-size: 0.875rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-success {
  color: #16A34A;
  padding: var(--space-md);
  background-color: #F0FDF4;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.form-card {
  padding: var(--space-xl);
}

/* 14. Prices */
.precio {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.precio--desde {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--mek-gris-500);
  display: block;
  margin-bottom: 4px;
}

.precio--efectivo {
  font-size: 0.875rem;
  color: #16A34A;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

.precio-tachado {
  text-decoration: line-through;
  color: var(--mek-gris-500);
  font-size: 1.25rem;
}

/* 15. Tables */
.tabla-promos {
  width: 100%;
  border-collapse: collapse;
}

.tabla-promos th,
.tabla-promos td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--mek-gris-300);
  text-align: left;
}

.tabla-promos th {
  font-weight: 600;
  background-color: var(--mek-nude);
}

.tabla-promos__tab-container {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tabla-promos__tab {
  padding: 8px 16px;
  border: 1px solid var(--mek-gris-300);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
}

.tabla-promos__tab.active {
  background-color: var(--mek-carbon);
  color: var(--mek-blanco);
  border-color: var(--mek-carbon);
}

.variantes {
  display: grid;
  gap: var(--space-sm);
}

.variante-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background-color: var(--mek-blanco);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* 16. Timeline */
.timeline {
  position: relative;
  padding-left: var(--space-xl);
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 2px;
  background-color: var(--mek-nude);
}

.timeline__step {
  position: relative;
  margin-bottom: var(--space-xl);
}

.timeline__step:last-child {
  margin-bottom: 0;
}

.timeline__step::before {
  content: '';
  position: absolute;
  left: calc(var(--space-xl) * -1);
  top: 4px;
  width: 32px;
  height: 32px;
  background-color: var(--mek-fucsia-fondo);
  border-radius: 50%;
  border: 4px solid var(--mek-hueso);
}

.timeline__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 8px;
}

/* 17. Profile */
.perfil {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 768px) {
  .perfil {
    grid-template-columns: 1fr 1fr;
  }
}

.perfil__foto {
  border-radius: var(--radius-md);
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

.perfil__indicadores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* 18. Map */
.mapa {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 19. Footer */
.footer {
  background-color: var(--mek-carbon);
  color: var(--mek-blanco);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-xl);
}

.footer__grid {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

.footer__title {
  color: var(--mek-blanco);
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__links a {
  opacity: 0.8;
  transition: opacity var(--duration-fast);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.footer__links a:hover {
  opacity: 1;
  text-decoration-color: var(--mek-fucsia);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.1);
  transition: background-color var(--duration-fast);
}

.footer__social a:hover {
  background-color: var(--mek-fucsia-fondo);
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
  font-size: 0.875rem;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* 20. WhatsApp Float */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mek-blanco);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  transition: transform var(--duration-fast) var(--ease-out);
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float__icon {
  width: 32px;
  height: 32px;
}

/* 21. Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--mek-gris-500);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--mek-carbon);
  font-weight: 600;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span.separator {
  color: var(--mek-gris-300);
}

/* 22. Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* 23. Responsive Overrides */
@media (max-width: 767px) {
  .section {
    padding-block: var(--space-2xl);
  }
}

/* 24. Accessibility & Reduced Motion */
:focus-visible {
  outline: 2px solid var(--mek-fucsia);
  outline-offset: 2px;
}

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

/* 25. Added Missing Classes */

.tu-primera-visita, .section-visita {
  width: 100%;
  background-color: var(--mek-carbon);
  color: var(--mek-blanco);
  padding-block: var(--space-3xl);
}

.tu-primera-visita .numero, .section-visita .numero {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--mek-fucsia);
  line-height: 1;
}

.prices-dense-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .prices-dense-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .prices-dense-grid { grid-template-columns: repeat(3, 1fr); } }
.prices-dense-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; border-bottom: 1px solid var(--mek-gris-200); height: 48px; }

@media (prefers-reduced-motion: no-preference) { .hero-lotus-bg path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2.5s ease-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } }

/* --- From index.php --- */

.hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  z-index: 0;
}

.hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

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

.indicator__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--mek-blanco);
  font-weight: 600;
  line-height: 1;
}

.indicator__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 8px;
}

.objetivos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 1024px) {
  .objetivos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.objetivo-card {
  background-color: var(--mek-blanco);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  border: 2px solid transparent;
}

.objetivo-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-4px);
}

.objetivo-card.active {
  border-bottom: 4px solid var(--mek-fucsia);
}

.objetivo-card svg {
  width: 48px;
  height: 48px;
  color: var(--mek-fucsia);
  margin-bottom: var(--space-sm);
}

.card-tratamiento {
  background-color: var(--mek-blanco);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.card-tratamiento:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.card-tratamiento__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.card-tratamiento__body {
  padding: var(--space-md);
  flex-grow: 1;
}

.card-tratamiento__body h3 {
  font-family: var(--font-display);
  color: var(--mek-carbon);
  margin-bottom: var(--space-sm);
}

.card-tratamiento__datos {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  display: grid;
  gap: 8px;
}

.card-tratamiento__datos li {
  display: flex;
  gap: 8px;
  color: var(--mek-gris-700);
}

.card-tratamiento__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-top: 1px solid var(--mek-gris-100);
}

.card-tratamiento.card--hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  padding: 0;
  margin: 0;
  border: none;
}

.promesa {
  font-size: 0.9rem;
  color: var(--mek-gris-700);
  margin-bottom: var(--space-sm);
}

.card-belleza__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mek-nude);
  border-radius: var(--radius-sm);
  color: var(--mek-fucsia);
}

.card-belleza__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-belleza__content h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin-bottom: 4px;
}

.card-belleza__content p {
  font-size: 0.875rem;
  color: var(--mek-gris-500);
}

.card-belleza__price {
  font-weight: 600;
  color: var(--mek-carbon);
  white-space: nowrap;
}

.belleza-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .belleza-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.nosotros-layout, .perfil-layout {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 768px) {
  .nosotros-layout, .perfil-layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .nosotros-layout {
    grid-template-columns: repeat(3, 1fr);
  }
}

.nosotros-image, .perfil__foto {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

.nosotros-img { aspect-ratio: 3/4; object-fit: cover; max-height: 420px; width: 100%; border-radius: 8px; }

.nosotros-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.nosotros-indicadores, .perfil__indicadores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.testimonios-grid, .promociones-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .testimonios-grid, .promociones-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .testimonios-grid, .promociones-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card-testimonio__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--mek-nude);
  color: var(--mek-fucsia);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.card-testimonio__meta {
  display: flex;
  flex-direction: column;
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: #FFB400;
}

.card-testimonio__text {
  font-style: italic;
  color: var(--mek-gris-700);
  margin-top: var(--space-sm);
}

.precios-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.precios-categoria {
  margin-bottom: var(--space-lg);
}

.precios-categoria h3 {
  font-family: var(--font-display);
  border-bottom: 2px solid var(--mek-nude);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.formas-pago-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.reserva-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .reserva-layout {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.reserva-text {
  color: var(--mek-blanco);
}

.reserva-form-container {
  background-color: var(--mek-blanco);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  color: var(--mek-carbon);
}

.ubicacion-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .ubicacion-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.ubicacion-mapa {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4/3;
}

.ubicacion-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
}

.redes {
  display: flex;
  gap: var(--space-sm);
}

.text-white {
  color: var(--mek-blanco) !important;
}

/* --- From tratamiento.php --- */

.tratamiento-page {
  padding-top: 0;
}

.hero-tratamiento {
  background-color: var(--mek-nude);
  padding-block: var(--space-3xl) var(--space-xl);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-tratamiento__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  z-index: 2;
  position: relative;
}

.hero-tratamiento__promesa {
  font-size: 1.125rem;
  color: var(--mek-gris-700);
}

.hero-tratamiento__image {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background-color: var(--mek-gris-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mek-gris-500);
}

.btn--secondary {
  background-color: transparent;
  border: 2px solid var(--mek-carbon);
  color: var(--mek-carbon);
}

.btn--secondary:hover {
  background-color: var(--mek-carbon);
  color: var(--mek-blanco);
}

.section-descripcion {
  padding-block: var(--space-2xl);
}

.descripcion-texto {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--mek-gris-700);
}

.section-para-quien {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .section-para-quien {
    grid-template-columns: 1fr 1fr;
  }
}

.para-quien-si, .para-quien-no {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.para-quien-si li, .para-quien-no li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.para-quien-si li::before {
  content: '✓';
  color: #16A34A;
  font-weight: bold;
}

.para-quien-no li::before {
  content: '✕';
  color: #DC2626;
  font-weight: bold;
}

.cabina-warning {
  background-color: #FEF3C7;
  border: 1px solid #F59E0B;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-top: var(--space-lg);
}

.cabina-warning svg {
  color: #D97706;
  flex-shrink: 0;
}

.section-variantes {
  padding-block: var(--space-2xl);
}

.variantes-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .variantes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.variante-card {
  background-color: var(--mek-blanco);
  border: 1px solid var(--mek-gris-100);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.variante-precio {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mek-carbon);
}

.section-promos-depi {
  padding-block: var(--space-2xl);
}

.depi-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  overflow-x: auto;
  padding-bottom: 8px;
}

.depi-tab-btn {
  padding: 8px 16px;
  border: 1px solid var(--mek-gris-300);
  background: var(--mek-blanco);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}

.depi-tab-btn.active {
  background: var(--mek-fucsia-fondo);
  color: var(--mek-blanco);
  border-color: var(--mek-fucsia);
}

.depi-tab-content {
  display: none;
}

.depi-tab-content.active {
  display: block;
}

.section-tecnica {
  padding-block: var(--space-2xl);
  background-color: var(--mek-gris-100);
}

.tecnica-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .tecnica-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tecnica-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background-color: var(--mek-blanco);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

.section-duracion {
  padding-block: var(--space-2xl);
}

.section-precio {
  padding-block: var(--space-2xl);
  background-color: var(--mek-nude);
}

.precio-card {
  background-color: var(--mek-blanco);
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  max-width: 600px;
  margin-inline: auto;
}

.precio-display {
  font-size: 3rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--mek-carbon);
  margin-block: var(--space-sm);
}

.medios-pago {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.section-faq {
  padding-block: var(--space-2xl);
}

.section-reserva {
  padding-block: var(--space-3xl);
}

.section-relacionados {
  padding-block: var(--space-2xl);
  background-color: var(--mek-gris-100);
}

.relacionados-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .relacionados-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.page-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-404 {
  padding: var(--space-3xl) var(--space-md);
}

/* --- From includes --- */

.trust-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.main-nav {
  display: none;
}

@media (min-width: 768px) {
  .main-nav {
    display: block;
  }
}

.main-nav__list {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast);
}

.mobile-menu__overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background-color: var(--mek-blanco);
  z-index: 1001;
  transition: right var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.mobile-menu__panel.active {
  right: 0;
}

.mobile-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--mek-gris-100);
}

.mobile-menu__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}

.mobile-menu__close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  gap: var(--space-sm);
  flex-grow: 1;
}

.mobile-menu__link {
  font-size: 1.125rem;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--mek-gris-100);
  font-weight: 600;
}

.mobile-menu__footer {
  padding: var(--space-md);
  border-top: 1px solid var(--mek-gris-100);
}

.form-reserva {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-feedback {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  display: none;
}

.form-feedback.success {
  display: block;
  background-color: #F0FDF4;
  color: #16A34A;
  border: 1px solid #BBF7D0;
}

.form-feedback.error {
  display: block;
  background-color: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.form-whatsapp-alt {
  margin-top: var(--space-md);
  text-align: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--mek-gris-100);
}

.footer__title--mt {
  margin-top: var(--space-lg);
}

.footer__link--all {
  font-weight: 600;
  color: var(--mek-fucsia);
}

.precio--consultar {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--mek-carbon);
}

.precio--rango {
  font-size: 1.125rem;
  color: var(--mek-gris-700);
}


/* --- ajustes finales --- */
.hero__loto svg { width:auto; height:100%; max-width:none; display:block; }
.hero__indicators .indicator__value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--mek-fucsia); line-height:1; }
.section--nude { background: #F1DFE4; }
.section--hueso { background: #FAF8F5; }

/* ============ AJUSTES v4 ============ */

/* Hero fucsia: texto legible sobre fondo de marca */
.hero--loto{
  background: radial-gradient(120% 90% at 50% 12%, #CC3C7A 0%, #BE3675 38%, #96295C 100%) !important;
  color: #fff;
}
.hero--loto h1, .hero--loto .hero__subtitle,
.hero--loto .indicator, .hero--loto .indicator__label{ color:#fff }
.hero--loto .indicator__value{ color:#fff }
.hero--loto .hero__loto{ opacity:.16 !important; filter: saturate(0) brightness(3) }
.hero--loto .btn--primary{ background:#fff; color:#A8306A; border-color:#fff }
.hero--loto .btn--primary:hover{ background:#FAF8F5; color:#8E2559 }
.hero--loto .btn--outline{ border:2px solid rgba(255,255,255,.85); color:#fff; background:rgba(255,255,255,.08) }
.hero--loto .btn--outline:hover{ background:#fff; color:#A8306A }

/* Antes y despues: dos fotos completas, sin recortar */
.ba-par{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.ba-par__item{ margin:0; background:var(--mek-nude); border-radius:14px; overflow:hidden }
.ba-par__item img{ display:block; width:100%; height:auto; object-fit:contain }
.ba-par__item figcaption{
  padding:8px 12px; font-family:var(--font-body); font-size:.8rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mek-carbon); text-align:center;
}
.ba-par__item:last-child figcaption{ color:var(--mek-fucsia) }
@media (max-width:560px){ .ba-par{ grid-template-columns:1fr } }

/* Numeros y datos siempre en Raleway: Cormorant confunde las cifras */
.precio, .price, .precios-tabla, .prices-dense-grid, .card-tratamiento__datos,
table, .faq__pregunta, summary, .indicator__label{
  font-family: var(--font-body) !important;
  font-variant-numeric: tabular-nums lining-nums;
}
.prices-dense-grid strong, .precio strong{ font-weight:600 }

/* FAQ mas presente */
summary{ font-size:1.0625rem; font-weight:600; padding:18px 0; cursor:pointer }
details{ border-bottom:1px solid var(--mek-gris-300) }
details[open] summary{ color:var(--mek-fucsia) }

/* Pasos de "Tu primera visita" */
.paso__numero, .primera-visita__numero, .step__number{
  font-family:var(--font-display); font-size:3.25rem; font-weight:700; line-height:1;
  color:var(--mek-fucsia); display:inline-flex; align-items:center; justify-content:center;
  width:88px; height:88px; border-radius:50%;
  background:rgba(215,66,137,.10); border:2px solid rgba(215,66,137,.30);
}

/* Logo mas grande y legible en el header */
.main-header__logo img, .main-header img[alt*="MEK"], .main-header img[alt*="Logo"]{
  height:56px !important; width:auto !important; max-width:none !important;
}
@media (max-width:768px){ .main-header__logo img{ height:44px !important } }
/* logo */ .logo-img{height:56px!important;width:auto!important}

/* Aviso del filtro por objetivo */
.filtro-aviso{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--mek-nude); border-left:4px solid var(--mek-fucsia);
  border-radius:12px; padding:16px 22px; margin:0 0 28px;
}
.filtro-aviso p{ margin:0; font-family:var(--font-body); font-size:1.0625rem }
.filtro-aviso strong{ color:var(--mek-carbon); font-weight:600 }

/* Interlineado seguro: Cormorant se superponia en titulos de 2 lineas */
h1{ line-height:1.12 }
h2{ line-height:1.18 !important }
h3{ line-height:1.25; margin-bottom:.5rem }
.card-tratamiento h3{ font-size:1.5rem; line-height:1.25 }
.card-tratamiento .promesa{ font-family:var(--font-body); line-height:1.55; margin:.25rem 0 1rem }
.hero--loto h1{ line-height:1.1; padding-bottom:.1em }

/* ===== correcciones vistas en el celular ===== */

/* el texto de los objetivos salia en azul de enlace */
.objetivo-card, .objetivo-card *{ color: var(--mek-carbon) !important; text-decoration:none !important }
.objetivo-card{ background:var(--mek-blanco); border:1px solid var(--mek-gris-300); cursor:pointer }
.objetivo-card svg, .objetivo-card path{ color: var(--mek-fucsia) !important; stroke: var(--mek-fucsia) }
.objetivo-card.active, .objetivo-card[aria-pressed="true"]{
  background:var(--mek-fucsia-fondo) !important; border-color:var(--mek-fucsia);
}
.objetivo-card.active *, .objetivo-card[aria-pressed="true"] *{ color:#fff !important }
.objetivo-card.active svg, .objetivo-card[aria-pressed="true"] svg,
.objetivo-card.active path, .objetivo-card[aria-pressed="true"] path{ color:#fff !important; stroke:#fff !important }

/* tarjetas del carrusel: que no dejen huecos enormes */
.tecnologia-carousel > *{ align-self:start !important; height:auto !important; min-height:0 !important }
.tecnologia-carousel{ align-items:start }

/* simbolo de los indicadores sin numero */
.hero--loto .indicator__value{ font-family:var(--font-display); font-size:2rem; line-height:1 }

/* ==========================================================
   DIRECCION B — bloques de color, Fraunces + Outfit
   (este bloque va al final: pisa lo anterior a proposito)
   ========================================================== */
:root{
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Outfit', 'Raleway', system-ui, sans-serif;
  --mek-nude: #F3E4E9;
  --mek-hueso: #FBF9F7;
}
body{ font-family: var(--font-body); font-size:1.0625rem; line-height:1.65; color:var(--mek-carbon) }
h1,h2,h3,h4{ font-family: var(--font-display); letter-spacing:-.02em }
h1{ font-weight:700; line-height:1.04 }
h2{ font-weight:700 !important; font-size:clamp(2.25rem,6vw,3.5rem) !important; line-height:1.1 !important }
h3{ font-weight:600; line-height:1.22 }

/* nada de sombras: es la marca del sitio hecho con plantilla */
.card-tratamiento, .card-testimonio, .perfil-card, .card-promo, .belleza-grid > *{
  box-shadow: none !important;
}

/* tarjetas con esquinas desiguales: recurso simple que rompe el aire de plantilla */
.card-tratamiento, .card-promo, .perfil-card{
  background: var(--mek-blanco);
  border: 1px solid #EFE6E9;
  border-radius: 4px 24px 4px 24px !important;
  overflow: hidden;
}
.card-tratamiento__img, .card-tratamiento__placeholder{ border-radius:0 !important }
.card-tratamiento h3{ font-size:1.5rem }

/* el precio como pastilla, no como texto suelto */
.card-tratamiento__footer .precio, .card-tratamiento__footer .price{
  background: var(--mek-nude); color: var(--mek-fucsia-dark, #A8306A);
  padding:7px 15px; border-radius:999px; font-weight:600; font-size:.9375rem;
  display:inline-block; font-family:var(--font-body);
}

/* ritmo: secciones alternadas que de verdad se distingan */
.section--hueso{ background: var(--mek-hueso) }
.section--nude{ background: var(--mek-nude) }
.section--carbon{ background: var(--mek-carbon); color:#F5F1F2 }
.section--carbon h2, .section--carbon h3{ color:#fff }

/* una seccion entera en fucsia para cortar el ritmo */
#primera-visita{
  background: linear-gradient(150deg,#CC3C7A,#BE3675 45%,#96295C) !important;
  color:#fff;
}
#primera-visita h2, #primera-visita h3{ color:#fff !important }
#primera-visita p, #primera-visita li{ color:rgba(255,255,255,.92) !important }
#primera-visita .paso__numero, #primera-visita .step__number, #primera-visita .primera-visita__numero{
  color:#fff !important; background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.45) !important;
}

/* titulos con subrayado corto de marca */
.section h2{ position:relative; padding-bottom:.45em }
.section h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:56px; height:4px; background:var(--mek-fucsia-fondo); border-radius:2px;
}
.section h2.text-center::after, .text-center h2::after{ left:50%; transform:translateX(-50%) }
.section--carbon h2::after, #primera-visita h2::after{ background:#fff }

/* botones con mas presencia */
.btn{ font-family:var(--font-body); font-weight:600; letter-spacing:.01em }
.btn--primary{ background:var(--mek-fucsia-fondo); border-color:var(--mek-fucsia) }
.btn--outline{ border-width:1.5px }

/* citas de testimonios con borde de marca */
.card-testimonio{
  background:var(--mek-blanco); border:1px solid #EFE6E9;
  border-left:4px solid var(--mek-fucsia); border-radius:0 20px 20px 0 !important;
}

/* numeros siempre legibles en Outfit */
.precio, .price, .prices-dense-grid, .card-tratamiento__datos, table, summary{
  font-family: var(--font-body) !important; font-variant-numeric: tabular-nums lining-nums;
}

/* ==========================================================
   Ritmo de secciones — ciruela para el catalogo
   ========================================================== */
:root{ --mek-ciruela:#2E1B24; --mek-ciruela-alto:#3A2230 }

#tratamientos{
  background: linear-gradient(180deg, var(--mek-ciruela-alto) 0%, var(--mek-ciruela) 100%) !important;
  color:#F3EAEE;
}
#tratamientos h2, #tratamientos h3{ color:#fff !important }
#tratamientos h2::after{ background:var(--mek-fucsia-fondo) }
#tratamientos .card-tratamiento__datos,
#tratamientos .card-tratamiento .promesa{ color:var(--mek-gris-700, #4A4648) }

/* las tarjetas quedan blancas: sobre ciruela resaltan mucho mas */
#tratamientos .card-tratamiento{
  background:var(--mek-blanco); border-color:transparent;
}
#tratamientos .card-tratamiento h3{ color:var(--mek-carbon) !important }

/* aviso del filtro, adaptado al fondo oscuro */
#tratamientos .filtro-aviso{
  background:rgba(255,255,255,.07); border-left-color:var(--mek-fucsia);
}
#tratamientos .filtro-aviso p, #tratamientos .filtro-aviso strong{ color:#F3EAEE }
#tratamientos .filtro-aviso .btn--outline{ border-color:rgba(255,255,255,.6); color:#fff }

/* que no se funda con lo que viene antes y despues */
#resultados{ background:var(--mek-hueso) !important }
#tambien-en-mek{ background:var(--mek-nude) !important }
#nosotros{ background:var(--mek-hueso) !important }
#promociones{ background:var(--mek-hueso) !important }
#precios{ background:var(--mek-nude) !important }

/* borde superior sutil que marca el cambio de bloque */
#tratamientos, #tecnologia, #primera-visita{ position:relative }
#tratamientos::before, #tecnologia::before, #primera-visita::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(215,66,137,.6), transparent);
}

/* alternancia final, seccion por seccion */
#objetivos      { background: var(--mek-hueso)  !important }
#resultados     { background: var(--mek-nude)   !important }
/* #tratamientos : ciruela */
#tambien-en-mek { background: var(--mek-hueso)  !important }
#nosotros       { background: var(--mek-nude)   !important }
/* #tecnologia   : carbon */
/* #primera-visita: fucsia */
#testimonios    { background: var(--mek-hueso)  !important }
#promociones    { background: var(--mek-nude)   !important }
#precios        { background: var(--mek-hueso)  !important }
#faq            { background: var(--mek-nude)   !important }
/* #reserva      : carbon */
#ubicacion      { background: var(--mek-hueso)  !important }

/* ==========================================================
   Fraunces: la J, la Q y la y bajan de la linea de base.
   Sin aire abajo, el contenedor las corta.
   ========================================================== */
h1,h2,h3,h4,.perfil-card h3,.card-tratamiento h3{
  overflow: visible !important;
  padding-bottom: .12em;
}
#nosotros h3, .perfil-card h3{
  line-height: 1.38 !important;
  padding-bottom: .22em !important;
  overflow: visible !important;
}
#nosotros .perfil-card, #nosotros .perfil-card *{ overflow: visible }
#nosotros .perfil-card > div:first-child{ overflow: hidden }  /* la foto si se recorta */

/* ==========================================================
   Mas color en las dos secciones que quedaban lavadas
   ========================================================== */
:root{ --mek-malva:#EBDCE5; --mek-arena:#F5EBE4 }

#tambien-en-mek{
  background: linear-gradient(160deg, var(--mek-nude) 0%, var(--mek-arena) 100%) !important;
}
#nosotros{
  background: linear-gradient(200deg, var(--mek-malva) 0%, var(--mek-nude) 100%) !important;
}

/* las tarjetas blancas encima de esos fondos, con borde de marca */
#tambien-en-mek .belleza-grid > *,
#nosotros .perfil-card{
  background: var(--mek-blanco) !important;
  border: 1px solid rgba(215,66,137,.16) !important;
  border-radius: 4px 24px 4px 24px !important;
}
#nosotros .perfil-card h3{ color: var(--mek-carbon) }
#nosotros .perfil-card small{ color: var(--mek-fucsia) }

/* las fotos del equipo tienen que llenar la tarjeta */
#nosotros .perfil-card > div:first-child{
  width:100% !important; aspect-ratio:3/4; max-height:420px; overflow:hidden;
  border-radius:0 !important; background:var(--mek-nude);
}
#nosotros .perfil-card picture{ display:block; width:100%; height:100% }
#nosotros .perfil-card img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
#nosotros .perfil-card{ display:flex; flex-direction:column }
#nosotros .perfil-card h3{ padding-left:1.25rem; padding-right:1.25rem; margin-top:1.1rem }
#nosotros .perfil-card p{ padding:0 1.25rem 1.5rem }

/* ==========================================================
   Franja blanca al deslizar en el celular:
   el panel del menu estaba escondido a la derecha pero
   contaba para el ancho de la pagina. Fijandolo, deja de empujar.
   ========================================================== */
/* el menu ya estaba bien: solo aseguro que el panel interno no empuje */
.mobile-menu:not(.is-open){ pointer-events:none }
.mobile-menu__panel{ position: fixed; top:0; right:0; height:100%; max-width:100% }

/* red de seguridad: nada puede generar scroll lateral */
html, body{ overflow-x: clip; max-width: 100% }

/* ==========================================================
   Tarjetas en ciruela: contraste invertido
   ========================================================== */
:root{ --mek-crema:#FBF5F0 }

/* sobre fondos claros -> tarjeta oscura */
.card-tratamiento, .card-testimonio, .perfil-card, .card-promo, .belleza-grid > *{
  background: var(--mek-ciruela) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #EDE2E7 !important;
}
.card-tratamiento h3, .card-testimonio h3, .perfil-card h3, .card-promo h3,
.belleza-grid h3, .belleza-grid h4{ color:#fff !important }
.card-tratamiento .promesa, .card-tratamiento__datos,
.card-tratamiento__datos li, .perfil-card p, .card-testimonio p,
.belleza-grid p, .belleza-grid small{ color:#CBBFC6 !important }
.card-tratamiento__datos strong, .perfil-card small{ color:#F06BA8 !important }

/* dentro de la seccion ciruela -> tarjeta crema, para que no se funda */
#tratamientos .card-tratamiento{
  background: var(--mek-crema) !important;
  border-color: rgba(0,0,0,.06) !important;
  color: var(--mek-carbon) !important;
}
#tratamientos .card-tratamiento h3{ color: var(--mek-carbon) !important }
#tratamientos .card-tratamiento .promesa,
#tratamientos .card-tratamiento__datos,
#tratamientos .card-tratamiento__datos li{ color: var(--mek-gris-700,#4A4648) !important }
#tratamientos .card-tratamiento__datos strong{ color: var(--mek-fucsia) !important }

/* pastilla de precio segun el fondo de la tarjeta */
.card-tratamiento__footer .precio, .card-tratamiento__footer .price{
  background: rgba(240,107,168,.16) !important; color:#F7A8CB !important;
}
#tratamientos .card-tratamiento__footer .precio,
#tratamientos .card-tratamiento__footer .price{
  background: var(--mek-nude) !important; color:#A8306A !important;
}

/* botones dentro de tarjeta oscura */
.card-tratamiento .btn--outline, .belleza-grid .btn--outline{
  border-color: rgba(255,255,255,.55) !important; color:#fff !important;
}
#tratamientos .card-tratamiento .btn--outline{
  border-color: var(--mek-carbon) !important; color: var(--mek-carbon) !important;
}
#tratamientos .card-tratamiento .btn--outline:hover{
  background: var(--mek-carbon) !important; color:#fff !important;
}

/* testimonios: el borde de marca se mantiene */
.card-testimonio{ border-left:4px solid var(--mek-fucsia) !important }

/* la foto del perfil no lleva marco claro */
#nosotros .perfil-card > div:first-child{ background: var(--mek-ciruela-alto) }

/* indicadores del inicio: 4 parejos, no 3 + 1 huerfano */
.hero__indicators{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:26px 18px; max-width:960px; margin:2.5rem auto 0; align-items:start;
}
.hero__indicators .indicator{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.hero__indicators .indicator__label{ font-size:.875rem; line-height:1.35; max-width:20ch }
@media (max-width:820px){ .hero__indicators{ grid-template-columns:repeat(2,1fr) } }

/* pisa la regla anterior de #nosotros, que tenia mas especificidad */
#nosotros .perfil-card,
#tambien-en-mek .belleza-grid > *{
  background: var(--mek-ciruela) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
#nosotros .perfil-card h3{ color:#fff !important }
#nosotros .perfil-card p{ color:#CBBFC6 !important }
#nosotros .perfil-card small{ color:#F06BA8 !important }
#tambien-en-mek .belleza-grid h3,
#tambien-en-mek .belleza-grid h4{ color:#fff !important }
#tambien-en-mek .belleza-grid p,
#tambien-en-mek .belleza-grid small{ color:#CBBFC6 !important }

/* ==========================================================
   ORDEN — este bloque manda sobre todo lo anterior.
   Regla: 4 fondos, 1 sola tarjeta. Nada mas.
   ========================================================== */

/* --- 1. la paleta se reduce --- */
:root{
  --bg-claro:  #FBF9F7;   /* hueso */
  --bg-suave:  #F4E7EC;   /* nude */
  --bg-oscuro: #2E1B24;   /* ciruela */
  --tarjeta:   #FFFCFA;   /* crema, la unica tarjeta */
  --linea:     rgba(215,66,137,.18);
}

/* --- 2. fondos: claro por defecto, suave alternado, oscuro como ancla --- */
#objetivos, #tambien-en-mek, #testimonios, #precios, #ubicacion{
  background: var(--bg-claro) !important;
}
#resultados, #nosotros, #promociones, #faq{
  background: var(--bg-suave) !important;
}
#tratamientos, #tecnologia, #reserva{
  background: var(--bg-oscuro) !important;
  color:#EFE6EA !important;
}
#tratamientos h2, #tratamientos h3, #tecnologia h2, #tecnologia h3,
#reserva h2, #reserva h3{ color:#fff !important }
#tratamientos p, #tecnologia p, #reserva p{ color:#C9BCC3 !important }

/* el fucsia queda solo en dos lugares */
#primera-visita{ background: linear-gradient(150deg,#CC3C7A,#BE3675 45%,#96295C) !important }

/* --- 3. una sola tarjeta, igual en todo el sitio --- */
.card-tratamiento, .card-testimonio, .perfil-card, .card-promo,
.belleza-grid > *, .objetivo-card,
#tratamientos .card-tratamiento,
#nosotros .perfil-card,
#tambien-en-mek .belleza-grid > *{
  background: var(--tarjeta) !important;
  border: 1px solid var(--linea) !important;
  border-radius: 4px 22px 4px 22px !important;
  box-shadow: none !important;
  color: var(--mek-carbon) !important;
}
.card-tratamiento h3, .card-testimonio h3, .perfil-card h3, .card-promo h3,
.belleza-grid h3, .belleza-grid h4,
#tratamientos .card-tratamiento h3, #nosotros .perfil-card h3{
  color: var(--mek-carbon) !important;
}
.card-tratamiento .promesa, .card-tratamiento__datos, .card-tratamiento__datos li,
.perfil-card p, .card-testimonio p, .belleza-grid p, .belleza-grid small,
#nosotros .perfil-card p{
  color:#5A5457 !important;
}
.card-tratamiento__datos strong, .perfil-card small, #nosotros .perfil-card small{
  color: var(--mek-fucsia) !important;
}

/* precio: una sola forma en todo el sitio */
.card-tratamiento__footer .precio, .card-tratamiento__footer .price,
#tratamientos .card-tratamiento__footer .precio,
#tratamientos .card-tratamiento__footer .price{
  background: var(--bg-suave) !important; color:#A8306A !important;
}

/* boton dentro de tarjeta: uno solo */
.card-tratamiento .btn--outline, .belleza-grid .btn--outline,
#tratamientos .card-tratamiento .btn--outline{
  border-color: var(--mek-carbon) !important; color: var(--mek-carbon) !important; background:transparent !important;
}
.card-tratamiento .btn--outline:hover,
#tratamientos .card-tratamiento .btn--outline:hover{
  background: var(--mek-carbon) !important; color:#fff !important;
}

/* testimonios: unica excepcion, el borde de marca */
.card-testimonio{ border-left:4px solid var(--mek-fucsia) !important; border-radius:0 22px 22px 0 !important }

/* objetivos: misma tarjeta, y el activo en fucsia */
.objetivo-card.active, .objetivo-card[aria-pressed="true"]{
  background: var(--mek-fucsia-fondo) !important; border-color: var(--mek-fucsia) !important;
}
.objetivo-card.active *, .objetivo-card[aria-pressed="true"] *{ color:#fff !important; stroke:#fff !important }

/* foto del perfil sin marco de otro color */
#nosotros .perfil-card > div:first-child{ background: var(--bg-suave) !important }

/* aviso del filtro sobre fondo oscuro */
#tratamientos .filtro-aviso{
  background: rgba(255,255,255,.06) !important; border-left-color: var(--mek-fucsia) !important;
}
#tratamientos .filtro-aviso p, #tratamientos .filtro-aviso strong{ color:#EFE6EA !important }

/* ==========================================================
   TARJETAS opcion 4 — sin fondo, solo borde.
   Se adaptan solas al fondo de cada seccion.
   ========================================================== */
.card-tratamiento, .card-testimonio, .perfil-card, .card-promo,
.belleza-grid > *, .objetivo-card,
#tratamientos .card-tratamiento, #nosotros .perfil-card,
#tambien-en-mek .belleza-grid > *{
  background: transparent !important;
  border: 1.5px solid rgba(215,66,137,.42) !important;
  box-shadow: none !important;
}

/* sobre fondo claro y suave: texto oscuro */
#objetivos .objetivo-card, #testimonios .card-testimonio,
#promociones .card-promo, #nosotros .perfil-card,
#tambien-en-mek .belleza-grid > *{
  color: var(--mek-carbon) !important;
}
#nosotros .perfil-card h3, #tambien-en-mek .belleza-grid h3,
#tambien-en-mek .belleza-grid h4, #testimonios .card-testimonio h3{
  color: var(--mek-carbon) !important;
}
#nosotros .perfil-card p, #tambien-en-mek .belleza-grid p,
#tambien-en-mek .belleza-grid small, #testimonios .card-testimonio p{
  color:#5A5457 !important;
}

/* sobre fondo oscuro: texto claro y borde mas visible */
#tratamientos .card-tratamiento{
  border-color: rgba(255,255,255,.34) !important;
  color:#EFE6EA !important;
}
#tratamientos .card-tratamiento h3{ color:#fff !important }
#tratamientos .card-tratamiento .promesa,
#tratamientos .card-tratamiento__datos,
#tratamientos .card-tratamiento__datos li{ color:#C9BCC3 !important }
#tratamientos .card-tratamiento__datos strong{ color:#F7A8CB !important }
#tratamientos .card-tratamiento .btn--outline{
  border-color: rgba(255,255,255,.6) !important; color:#fff !important;
}
#tratamientos .card-tratamiento .btn--outline:hover{ background:#fff !important; color:var(--mek-ciruela) !important }
#tratamientos .card-tratamiento__footer .precio,
#tratamientos .card-tratamiento__footer .price{
  background: rgba(255,255,255,.12) !important; color:#F7A8CB !important;
}

/* la foto ya no necesita marco: ocupa el ancho de la tarjeta */
.card-tratamiento__img, .card-tratamiento__placeholder{ border-radius:0 !important }

/* ==========================================================
   TIPOGRAFIA — Syne (titulos) + Manrope (cuerpo)
   ========================================================== */
:root{
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}
body{ font-family: var(--font-body); font-size:1.0625rem; line-height:1.62 }
h1,h2,h3,h4,h5{ font-family: var(--font-display); letter-spacing:-.03em }
h1{ font-weight:800; line-height:1.02 }
h2{ font-weight:800 !important; line-height:1.06 !important }
h3{ font-weight:700; line-height:1.2 }
h4{ font-weight:700 }
.btn{ font-family: var(--font-body); font-weight:700; letter-spacing:0 }
/* Syne no tiene descendentes problematicos: se puede ajustar el aire */
h1,h2,h3,h4{ padding-bottom:.04em }
#nosotros h3, .perfil-card h3{ line-height:1.22 !important; padding-bottom:.06em !important }

/* ==========================================================
   TRANSICION entre secciones claras y oscuras.
   El corte seco de claro a ciruela era demasiado abrupto.
   ========================================================== */
#tratamientos, #tecnologia, #reserva{
  background: linear-gradient(
    180deg,
    var(--bg-suave) 0%,
    #A98195 5%,
    #6B4356 11%,
    var(--bg-oscuro) 20%,
    var(--bg-oscuro) 100%
  ) !important;
  padding-top: 6rem !important;
}
/* la linea fucsia de arriba ya no hace falta con el degradado */
#tratamientos::before, #tecnologia::before, #reserva::before{ content:none !important }

/* y de vuelta a claro al final de cada seccion oscura */
#tratamientos::after, #tecnologia::after, #reserva::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:90px;
  background: linear-gradient(180deg, transparent, rgba(251,249,247,.9));
  pointer-events:none;
}
#reserva::after{ background: linear-gradient(180deg, transparent, rgba(251,249,247,.9)) }
#tratamientos, #tecnologia, #reserva{ position:relative; padding-bottom:6rem !important }

/* ==========================================================
   Transicion corregida: la franja de degradado va ARRIBA
   del contenido, no atras. Asi el titulo nunca queda ilegible.
   ========================================================== */
#tratamientos, #tecnologia, #reserva{
  background: var(--bg-oscuro) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  position: relative;
  overflow: visible;
}
/* franja superior: de claro a oscuro, fuera del area de contenido */
#tratamientos::before, #tecnologia::before, #reserva::before{
  content:"" !important;
  position:absolute; left:0; right:0; top:-140px; height:140px;
  background: linear-gradient(180deg, var(--bg-suave) 0%, #C79FB0 42%, #7A4E62 72%, var(--bg-oscuro) 100%);
  pointer-events:none;
}
/* franja inferior: de oscuro a claro */
#tratamientos::after, #tecnologia::after, #reserva::after{
  content:"" !important;
  position:absolute; left:0; right:0; bottom:-140px; height:140px;
  background: linear-gradient(180deg, var(--bg-oscuro) 0%, #7A4E62 28%, #C79FB0 58%, var(--bg-claro) 100%);
  pointer-events:none;
}
/* la seccion siguiente arranca clara, asi el degradado cierra bien */
#tambien-en-mek, #primera-visita, #ubicacion{ position:relative; z-index:1 }

/* las secciones vecinas necesitan aire para que se vea la transicion */
#resultados, #nosotros, #faq{ padding-bottom: 9rem !important }
#tambien-en-mek, #ubicacion{ padding-top: 9rem !important }
#primera-visita{ margin-top: 140px }

/* ==========================================================
   Ajustes de tipografia: Syne venia demasiado apretada
   ========================================================== */
h1,h2,h3,h4,h5{ letter-spacing:-.012em !important }
h1{ line-height:1.14 !important; font-weight:700 !important }
h2{ line-height:1.16 !important; font-weight:700 !important; word-spacing:.04em }
h3{ line-height:1.28 !important; font-weight:700 !important }
.hero--loto h1{ line-height:1.12 !important }

/* aire abajo: la "j" de "mejorar" y la "g" bajan de la linea */
h1,h2,h3,h4,h5,.objetivo-card span,.card-tratamiento h3{
  padding-bottom:.14em !important; overflow:visible !important;
}
.section h2{ padding-bottom:.52em !important }

/* texto de las tarjetas de tratamiento, un poco mas legible */
.card-tratamiento .promesa{ font-size:1rem; line-height:1.6 }
.card-tratamiento__datos{ font-size:.9375rem; line-height:1.75 }
.card-tratamiento h3{ font-size:1.5rem }

/* tarjetas de belleza: ahora llevan boton propio */
.card-belleza{ display:flex; flex-direction:column; padding:22px }
.card-belleza__cta{ margin-top:14px; align-self:flex-start }

/* ==========================================================
   Menu movil — el logo salia aplastado y el conjunto flojo
   ========================================================== */
.mobile-menu{
  background: var(--bg-oscuro) !important;
  width: 86% !important; max-width: 380px !important;
}
.mobile-menu__header{
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  align-items: center !important;
}
.mobile-menu__logo{
  height: 52px !important; width: auto !important;
  max-width: none !important; object-fit: contain !important;
  filter: brightness(0) invert(1) !important;   /* logo en blanco sobre el fondo oscuro */
}
.mobile-menu__close{
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: transparent !important; color: #fff !important;
  display: grid !important; place-items: center !important;
}
.mobile-menu__close:hover{ background: rgba(255,255,255,.10) !important }

.mobile-menu__nav{ padding: 10px 0 !important }
.mobile-menu__link{
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 20px 24px !important;
  font-family: var(--font-display) !important;
  font-size: 1.375rem !important; font-weight: 700 !important;
  color: #fff !important; border-bottom: 1px solid rgba(255,255,255,.07) !important;
  letter-spacing: -.01em !important;
}
.mobile-menu__link::after{
  content: "→"; font-family: var(--font-body); font-size: 1.125rem;
  color: var(--mek-fucsia); opacity: .75;
}
.mobile-menu__link:active, .mobile-menu__link:hover{
  background: rgba(215,66,137,.14) !important; color: #fff !important;
}

/* pie del menu: contacto siempre a mano */
.mobile-menu .btn--primary, .mobile-menu .btn--full{
  margin: 22px 24px 10px !important; width: calc(100% - 48px) !important;
  padding: 16px !important; font-size: 1rem !important;
}
.mobile-menu__panel{ background: var(--bg-oscuro) !important }

/* transicion mas suave al abrir y cerrar */
.mobile-menu{ transition: transform .34s cubic-bezier(.22,1,.36,1) !important }
@media (prefers-reduced-motion: reduce){ .mobile-menu{ transition:none !important } }

/* ==========================================================
   Tratamientos: nude intenso en vez de oscuro
   ========================================================== */
:root{ --bg-intenso:#EBD2DC }

#tratamientos{
  background: var(--bg-intenso) !important;
  color: var(--mek-carbon) !important;
}
#tratamientos h2, #tratamientos h3{ color: var(--mek-carbon) !important }
#tratamientos p{ color:#5A5457 !important }
#tratamientos::before{
  background: linear-gradient(180deg, var(--bg-suave) 0%, var(--bg-intenso) 100%) !important;
}
#tratamientos::after{
  background: linear-gradient(180deg, var(--bg-intenso) 0%, var(--bg-claro) 100%) !important;
}
/* tarjetas sobre nude intenso */
#tratamientos .card-tratamiento{
  border-color: rgba(168,48,106,.42) !important;
  color: var(--mek-carbon) !important;
}
#tratamientos .card-tratamiento h3{ color: var(--mek-carbon) !important }
#tratamientos .card-tratamiento .promesa,
#tratamientos .card-tratamiento__datos,
#tratamientos .card-tratamiento__datos li{ color:#5A5457 !important }
#tratamientos .card-tratamiento__datos strong{ color: var(--mek-fucsia) !important }
#tratamientos .card-tratamiento .btn--outline{
  border-color: var(--mek-carbon) !important; color: var(--mek-carbon) !important;
}
#tratamientos .card-tratamiento .btn--outline:hover{ background: var(--mek-carbon) !important; color:#fff !important }
#tratamientos .card-tratamiento__footer .precio,
#tratamientos .card-tratamiento__footer .price{
  background: rgba(255,255,255,.72) !important; color:#A8306A !important;
}
#tratamientos .filtro-aviso{
  background: rgba(255,255,255,.55) !important;
}
#tratamientos .filtro-aviso p, #tratamientos .filtro-aviso strong{ color: var(--mek-carbon) !important }
#tratamientos .filtro-aviso .btn--outline{ border-color: var(--mek-carbon) !important; color: var(--mek-carbon) !important }

/* ==========================================================
   PRECIOS — lista con linea de puntos, tipo carta
   ========================================================== */
#precios .prices-dense-grid,
#precios table, #precios tbody, #precios thead{
  display:block !important; width:100% !important; border:0 !important;
}
#precios tr{
  display:flex !important; align-items:baseline !important; gap:10px;
  padding:13px 0 !important; border:0 !important;
  border-bottom:1px dotted rgba(46,42,44,.22) !important;
}
#precios td{
  display:block !important; border:0 !important; padding:0 !important;
  font-family: var(--font-body) !important;
}
#precios td:first-child{ flex:1 1 auto; font-size:1.0625rem; color:var(--mek-carbon) }
#precios td:last-child{
  flex:0 0 auto; font-weight:700; font-size:1.0625rem;
  color:var(--mek-fucsia-dark,#A8306A); white-space:nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
#precios th{
  display:block !important; border:0 !important; padding:26px 0 8px !important;
  font-family: var(--font-body) !important; font-size:.75rem !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:var(--mek-fucsia) !important; text-align:left !important; font-weight:700 !important;
}
/* que ningun precio sea mas grande que otro */
#precios td strong, #precios td b, #precios .precio, #precios .price{
  font-size:1.0625rem !important; font-weight:700 !important;
}
#precios .container{ max-width:760px }

/* ==========================================================
   PRECIOS — lista con linea de puntos (estructura real: divs)
   ========================================================== */
#precios .container{ max-width:760px !important }
#precios .prices-dense-grid{
  display:block !important; grid-template-columns:none !important;
  margin-top:1.5rem;
}
#precios .prices-dense-row{
  display:flex !important; align-items:baseline !important;
  padding:0 !important; margin:0 0 2px !important; border:0 !important;
  background-image: linear-gradient(to right, rgba(46,42,44,.30) 22%, transparent 22%) !important;
  background-position: 0 1.35em !important;
  background-size: 7px 1.5px !important;
  background-repeat: repeat-x !important;
  min-height: 2.6em;
  font-family: var(--font-body) !important;
}
/* los hijos tapan los puntos: dan la sensacion de linea guia */
#precios .prices-dense-row > *{
  background: var(--bg-claro) !important;
  padding: .55em 0 !important;
  font-size: 1.0625rem !important;
  line-height: 1.35 !important;
}
#precios .prices-dense-row > *:first-child{
  padding-right: 10px !important;
  color: var(--mek-carbon) !important; font-weight: 500 !important;
}
#precios .prices-dense-row > *:last-child{
  margin-left: auto !important; padding-left: 10px !important;
  color: #A8306A !important; font-weight: 700 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}
/* ningun precio mas grande que otro */
#precios .prices-dense-row *{ font-size:1.0625rem !important }

/* encabezado de categoria, si existe */
#precios .prices-dense-grid > h3,
#precios .prices-category{
  font-family: var(--font-body) !important;
  font-size:.75rem !important; letter-spacing:.16em !important;
  text-transform:uppercase !important; color:var(--mek-fucsia) !important;
  font-weight:700 !important; margin:2.2rem 0 .6rem !important; background:transparent !important;
}
#precios .formas-pago-info{ margin-top:2.5rem }

/* tarjetas de belleza con foto */
.card-belleza{ padding:0 !important; overflow:hidden }
.card-belleza__foto{ display:block; width:100%; aspect-ratio:4/3; overflow:hidden }
.card-belleza__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.card-belleza__content{ padding:20px 22px 24px }
.card-belleza h3{ font-size:1.375rem; margin:0 0 .4rem }
.card-belleza p{ font-size:.9375rem; line-height:1.55; margin:0 0 1rem }
.card-belleza__cta{ margin:0 !important }

/* ==========================================================
   TRANSICIONES EN TODAS LAS SECCIONES
   Cada seccion arranca con una franja que viene del color anterior.
   ========================================================== */
:root{
  --t-fucsia:#C93E80; --t-claro:#FBF9F7; --t-suave:#F4E7EC;
  --t-intenso:#EBD2DC; --t-oscuro:#2E1B24;
}
/* limpio los apaños anteriores */
#tratamientos::before,#tecnologia::before,#reserva::before,
#tratamientos::after,#tecnologia::after,#reserva::after{ content:none !important }
#primera-visita{ margin-top:0 !important }
#resultados,#nosotros,#faq{ padding-bottom:4.5rem !important }
#tambien-en-mek,#ubicacion{ padding-top:0 !important }

section{ position:relative }
section > .container{ position:relative; z-index:2 }

/* la franja de transicion: 130px arriba de cada seccion */
#objetivos::before,#resultados::before,#tratamientos::before,#tecnologia::before,
#tambien-en-mek::before,#nosotros::before,#primera-visita::before,#testimonios::before,
#promociones::before,#precios::before,#gift-card::before,#faq::before,#reserva::before,#ubicacion::before{
  content:"" !important; position:absolute; inset:0 0 auto 0; height:130px; z-index:1; pointer-events:none;
}
/* cada una recibe el color de la que viene antes */
#objetivos::before      { background:linear-gradient(180deg,var(--t-fucsia), var(--t-claro)) }
#resultados::before     { background:linear-gradient(180deg,var(--t-claro),  var(--t-suave)) }
#tratamientos::before   { background:linear-gradient(180deg,var(--t-suave),  var(--t-intenso)) }
#tecnologia::before     { background:linear-gradient(180deg,var(--t-intenso),var(--t-oscuro)) }
#tambien-en-mek::before { background:linear-gradient(180deg,var(--t-oscuro), var(--t-claro)) }
#nosotros::before       { background:linear-gradient(180deg,var(--t-claro),  var(--t-suave)) }
#primera-visita::before { background:linear-gradient(180deg,var(--t-suave),  var(--t-fucsia)) }
#testimonios::before    { background:linear-gradient(180deg,var(--t-fucsia), var(--t-claro)) }
#promociones::before    { background:linear-gradient(180deg,var(--t-claro),  var(--t-suave)) }
#precios::before        { background:linear-gradient(180deg,var(--t-suave),  var(--t-claro)) }
#gift-card::before      { background:linear-gradient(180deg,var(--t-claro),  var(--t-suave)) }
#faq::before            { background:linear-gradient(180deg,var(--t-suave),  var(--t-claro)) }
#reserva::before        { background:linear-gradient(180deg,var(--t-claro),  var(--t-oscuro)) }
#ubicacion::before      { background:linear-gradient(180deg,var(--t-oscuro), var(--t-claro)) }

/* aire para que el contenido arranque despues de la franja */
#objetivos,#resultados,#tratamientos,#tecnologia,#tambien-en-mek,#nosotros,
#primera-visita,#testimonios,#promociones,#precios,#gift-card,#faq,#reserva,#ubicacion{
  padding-top: 9.5rem !important;
}
@media (max-width:720px){
  #objetivos,#resultados,#tratamientos,#tecnologia,#tambien-en-mek,#nosotros,
  #primera-visita,#testimonios,#promociones,#precios,#gift-card,#faq,#reserva,#ubicacion{
    padding-top: 7.5rem !important;
  }
}

/* ==========================================================
   Numeros: el "2" de "+28" salia mas chico que el "8"
   ========================================================== */
.indicator__value, .hero__indicators .indicator__value{
  font-family: var(--font-body) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
  font-weight: 800 !important; font-size: 2.25rem !important; letter-spacing:-.02em;
}

/* la "g" de "Seguimiento" y compania, en Tu primera visita */
#primera-visita h3, #primera-visita h2, #primera-visita p,
#primera-visita li, #primera-visita *{
  overflow: visible !important;
}
#primera-visita h3{ line-height:1.35 !important; padding-bottom:.18em !important }

/* ==========================================================
   Menu movil: el logo con filtro mostraba el recuadro del PNG
   ========================================================== */
.mobile-menu__logo{ filter:none !important; height:46px !important }

/* ==========================================================
   PRECIOS — mas presencia y sin pegarse a los nombres largos
   ========================================================== */
#precios{ background:var(--t-claro) !important }
#precios .container{ max-width:820px !important }
#precios .prices-dense-row{
  background-position: 0 1.5em !important;
  min-height: 3em !important;
  gap: 4px !important;
}
#precios .prices-dense-row > *{
  background: var(--t-claro) !important;
  padding: .62em 0 !important;
  font-size: 1.0625rem !important;
}
#precios .prices-dense-row > *:first-child{
  padding-right: 14px !important; max-width: 62% !important;
}
#precios .prices-dense-row > *:last-child{
  padding-left: 14px !important;
  font-size: 1.125rem !important; font-weight: 800 !important;
  color: var(--mek-fucsia) !important;
  font-family: var(--font-body) !important;
}
#precios .prices-dense-row *{ font-size:inherit !important }
#precios .prices-dense-row:hover > *:first-child{ color: var(--mek-fucsia) !important }

/* titulo de la seccion con mas peso visual */
#precios h2{ margin-bottom:.4em }
#precios .prices-dense-grid{
  border-top: 2px solid rgba(215,66,137,.28);
  padding-top: 1.2rem; margin-top: 1.8rem;
}

/* ==========================================================
   Medios de pago y planes: en fila ordenada, no amontonados
   ========================================================== */
#precios .formas-pago-info{
  margin-top: 3rem !important;
  border-top: 2px solid rgba(215,66,137,.28);
  padding-top: 2rem;
  display: grid; gap: 1.4rem;
}
#precios .formas-pago-info h3{
  font-size: .78rem !important; letter-spacing:.16em; text-transform:uppercase;
  color: var(--mek-fucsia) !important; font-family: var(--font-body) !important;
  font-weight: 700 !important; margin: 0 0 .2rem !important;
}
#precios .formas-pago-info ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
#precios .formas-pago-info li{
  background: #fff; border: 1px solid rgba(215,66,137,.22);
  border-radius: 999px; padding: 9px 18px;
  font-size: .9375rem; color: var(--mek-carbon);
}
#precios .formas-pago-info p{ margin:0; color:#5A5457; font-size:.9375rem; line-height:1.6 }

/* ==========================================================
   MENU — logo mas grande y animacion en una sola pieza
   ========================================================== */
.mobile-menu__logo{
  height: 68px !important; width: auto !important; max-width: 190px !important;
  object-fit: contain !important; filter: none !important;
}
.mobile-menu__header{ padding: 26px 24px 20px !important }

/* una sola transicion, sin rebote ni doble animacion */
.mobile-menu{ transition: transform .40s ease-in-out !important }
.mobile-menu__panel{ transition: none !important }
.mobile-menu__overlay{ transition: opacity .40s ease-in-out !important }
@media (prefers-reduced-motion: reduce){
  .mobile-menu, .mobile-menu__overlay{ transition:none !important }
}

/* ==========================================================
   La "g" se cortaba contra el subrayado del titulo.
   El subrayado baja y el titulo recupera su espacio.
   ========================================================== */
h1,h2,h3,h4,h5,h6,p,li,span,a,summary,figcaption{ overflow: visible !important }
.section h2{
  padding-bottom: 0 !important;
  margin-bottom: 1.6rem !important;
  line-height: 1.22 !important;
}
.section h2::after{
  position: static !important;
  display: block !important;
  transform: none !important;
  margin-top: .55em !important;
  width: 64px !important; height: 4px !important;
}
.text-center h2::after, .section h2.text-center::after{ margin-left:auto !important; margin-right:auto !important }
h3, h4{ line-height:1.32 !important; padding-bottom:.1em !important }
#primera-visita h3, #tecnologia h3, #tecnologia h2{ line-height:1.34 !important; padding-bottom:.16em !important }

/* ==========================================================
   Titulos: sistema con etiqueta arriba, subrayado solo en algunas
   ========================================================== */
.section h2{ position:relative }
#objetivos h2::before,
#tratamientos h2::before,
#tecnologia h2::before,
#nosotros h2::before,
#primera-visita h2::before,
#precios h2::before{
  display:block; font-family:var(--font-body); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mek-fucsia);
  margin-bottom:.85rem; opacity:.9;
}
#objetivos h2::before { content:"Empezá por acá" }
#tratamientos h2::before { content:"El catálogo completo" }
#tecnologia h2::before { content:"Con qué trabajamos" }
#nosotros h2::before { content:"El equipo" }
#primera-visita h2::before { content:"Cómo es el proceso"; color:#fff !important }
#precios h2::before { content:"Transparencia" }

/* el subrayado queda solo en tres, para que no sea repetitivo */
#resultados h2::after, #tambien-en-mek h2::after, #testimonios h2::after,
#promociones h2::after, #faq h2::after, #ubicacion h2::after, #reserva h2::after{
  display:none !important;
}

/* ==========================================================
   Tu primera visita: la franja de color desalineaba el contenido
   ========================================================== */
#primera-visita{ padding-top:10.5rem !important; padding-bottom:6rem !important }
#primera-visita > .container{ position:relative; z-index:2 }
#primera-visita h2{ margin-bottom:2.2rem !important }

/* ==========================================================
   Reservá tu consulta en fucsia
   ========================================================== */
#reserva{
  background: linear-gradient(150deg,#CC3C7A,#BE3675 45%,#96295C) !important;
  color:#fff !important;
}
#reserva h2, #reserva h3, #reserva label{ color:#fff !important }
#reserva p, #reserva li{ color:rgba(255,255,255,.92) !important }
#reserva::before{ background:linear-gradient(180deg, var(--t-suave), #C93E80) !important }
#ubicacion::before{ background:linear-gradient(180deg, #A8306A, var(--t-claro)) !important }
#reserva .btn--primary{ background:#fff !important; color:#A8306A !important; border-color:#fff !important }
#reserva input, #reserva select, #reserva textarea{
  background:rgba(255,255,255,.96) !important; border-color:transparent !important; color:var(--mek-carbon) !important;
}

/* ==========================================================
   Arreglos: formulario, boton pegado y alineacion
   ========================================================== */

/* el formulario de reserva se blanqueaba entero */
#reserva .form-reserva, #reserva form,
#reserva .card, #reserva > .container > div{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 4px 24px 4px 24px !important;
  padding: 26px !important;
}
#reserva input, #reserva select, #reserva textarea{
  background: #fff !important; color: var(--mek-carbon) !important;
  border: 1.5px solid rgba(46,42,44,.18) !important; border-radius: 10px !important;
  padding: 13px 14px !important; width: 100% !important;
}
#reserva input::placeholder, #reserva textarea::placeholder{ color:#8A8486 !important }
#reserva input:focus, #reserva select:focus, #reserva textarea:focus{
  outline: 3px solid rgba(255,255,255,.7) !important; outline-offset: 1px !important;
  border-color: transparent !important;
}
#reserva label{
  color:#fff !important; font-weight:600 !important; font-size:.9375rem !important;
  display:block !important; margin-bottom:.4rem !important;
}
#reserva .form-group, #reserva .campo{ margin-bottom:1.1rem !important }

/* el boton quedaba negro fijo despues de tocarlo */
.btn--outline{ transition: background-color .18s ease, color .18s ease }
.btn--outline:focus:not(:focus-visible){ background:transparent !important; color:inherit !important }
#btn-ver-todos, .filtro-aviso .btn--outline{
  background: transparent !important; color: var(--mek-carbon) !important;
  border-color: var(--mek-carbon) !important;
}
#btn-ver-todos:hover, .filtro-aviso .btn--outline:hover{
  background: var(--mek-carbon) !important; color:#fff !important;
}
#btn-ver-todos:focus:not(:focus-visible){ background:transparent !important; color:var(--mek-carbon) !important }

/* alineacion de la seccion de reserva, igual que primera visita */
#reserva{ padding-top:10.5rem !important; padding-bottom:6rem !important }
#reserva > .container{ position:relative; z-index:2 }
#reserva h2{ margin-bottom:2.2rem !important }

/* la nota del efectivo se salia de su pastilla */
#precios .formas-pago-info li{
  white-space: normal !important; line-height:1.45 !important;
  max-width: 100% !important; text-align:left !important;
}
#precios .formas-pago-info ul{ align-items:stretch }

/* ==========================================================
   Syne tiene descendentes muy profundas: mas aire, sin recortes
   ========================================================== */
h1{ line-height:1.24 !important; padding-bottom:.18em !important }
h2{ line-height:1.34 !important; padding-bottom:.14em !important }
h3, h4, h5{ line-height:1.42 !important; padding-bottom:.14em !important }
.section h2{ line-height:1.34 !important; padding-bottom:.14em !important }
.hero--loto h1{ line-height:1.2 !important; padding-bottom:.2em !important }

/* ningun contenedor de texto puede recortar */
.card-tratamiento, .card-belleza, .perfil-card, .card-testimonio, .card-promo{
  overflow: visible !important;
}
/* solo la foto se recorta */
.card-tratamiento__img, .card-belleza__foto, .perfil-card > div:first-child{
  overflow: hidden !important; border-radius:0 !important;
}
.card-tratamiento, .card-belleza, .perfil-card{ border-radius:4px 22px 4px 22px !important }
.card-tratamiento > picture:first-child, .card-tratamiento > img:first-child{
  display:block; overflow:hidden; border-radius:3px 21px 0 0;
}
.card-tratamiento__body, .card-belleza__content{ overflow:visible !important }

/* ==========================================================
   Reserva: el panel del formulario es blanco, asi que
   sus etiquetas van oscuras. El texto sobre fucsia, blanco.
   ========================================================== */
#reserva .reserva-form-container{
  background: #fff !important;
  border: 0 !important;
  border-radius: 4px 26px 4px 26px !important;
  padding: 34px 30px !important;
}
#reserva .reserva-form-container label,
#reserva .reserva-form-container .form-group label{
  color: var(--mek-carbon) !important; font-weight: 600 !important;
  font-size: .9rem !important; margin-bottom: .45rem !important; display:block !important;
}
#reserva .reserva-form-container h3,
#reserva .reserva-form-container p{ color: var(--mek-carbon) !important }
#reserva .reserva-form-container small,
#reserva .reserva-form-container .ayuda{ color:#6B6468 !important }
#reserva .form-input, #reserva .form-select, #reserva textarea{
  background:#FBF9F7 !important; border:1.5px solid rgba(46,42,44,.16) !important;
  border-radius:10px !important; padding:13px 14px !important; color:var(--mek-carbon) !important;
}
#reserva .form-input:focus, #reserva .form-select:focus, #reserva textarea:focus{
  border-color: var(--mek-fucsia) !important;
  outline: 3px solid rgba(215,66,137,.22) !important; outline-offset:1px !important;
  background:#fff !important;
}
#reserva .form-group{ margin-bottom:1.15rem !important }
#reserva .reserva-form-container .btn--primary{
  background: var(--mek-fucsia-fondo) !important; color:#fff !important;
  border-color: var(--mek-fucsia) !important; width:100% !important; padding:15px !important;
}
/* la columna de texto sigue en blanco sobre el fucsia */


/* la etiqueta dentro del panel blanco, siempre oscura (gana por especificidad) */
#reserva .reserva-form-container .form-group label,
#reserva .reserva-form-container label,
#reserva div.reserva-form-container label{
  color: #2E2A2C !important;
}

/* ==========================================================
   Esquinas redondeadas en todas las fotos
   ========================================================== */
.card-tratamiento__img, .card-belleza__foto, .card-belleza__foto img,
.perfil-card > div:first-child, .ba-par__item, .ba-par__item img,
.equipo-card img, #tecnologia img, .card-tratamiento__placeholder{
  border-radius: 14px !important; overflow: hidden !important;
}
.card-tratamiento > picture:first-child, .card-tratamiento > picture:first-child img{
  border-radius: 14px !important; overflow:hidden !important;
}
.card-tratamiento, .card-belleza, .perfil-card{ padding: 12px !important }
.card-tratamiento__body, .card-belleza__content{ padding: 14px 8px 6px !important }

/* ==========================================================
   Boton de promociones en fucsia, no en verde
   ========================================================== */
#promociones .btn--whatsapp, #promociones .btn{
  background: var(--mek-fucsia-fondo) !important; border-color: var(--mek-fucsia) !important;
  color:#fff !important;
}
#promociones .btn--whatsapp svg{ display:none !important }
#promociones .btn:hover{ background:#A8306A !important; border-color:#A8306A !important }

/* ==========================================================
   Tu primera visita: numero grande, titulo apenas menor
   ========================================================== */
#primera-visita .paso, #primera-visita .step, #primera-visita li{
  display: grid !important;
  grid-template-columns: 108px 1fr !important;
  gap: 4px 22px !important;
  align-items: start !important;
  padding: 26px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.22) !important;
  border-left: 0 !important;
}
#primera-visita .paso:last-child, #primera-visita li:last-child{ border-bottom:0 !important }
#primera-visita .paso__numero, #primera-visita .step__number,
#primera-visita .primera-visita__numero, #primera-visita .numero{
  grid-row: 1 / span 2 !important;
  font-family: var(--font-display) !important;
  font-size: 5.5rem !important; font-weight: 800 !important; line-height: .85 !important;
  color: rgba(255,255,255,.42) !important;
  background: none !important; border: 0 !important;
  width: auto !important; height: auto !important; border-radius: 0 !important;
  display: block !important; text-align: right !important; padding-right: 4px !important;
}
#primera-visita h3{
  font-size: 1.75rem !important; line-height: 1.28 !important;
  margin: 0 0 .35rem !important; align-self: end !important;
}
#primera-visita p{ margin: 0 !important; font-size: 1rem !important; line-height: 1.6 !important }
@media (max-width: 640px){
  #primera-visita .paso, #primera-visita .step, #primera-visita li{
    grid-template-columns: 74px 1fr !important; gap: 2px 16px !important;
  }
  #primera-visita .paso__numero, #primera-visita .step__number,
  #primera-visita .primera-visita__numero, #primera-visita .numero{ font-size: 3.75rem !important }
  #primera-visita h3{ font-size: 1.375rem !important }
}

/* ==========================================================
   Formas de pago — iconos de color y nota en fucsia
   ========================================================== */
#precios .formas-pago-info{
  background: transparent !important; border:0 !important; padding:0 !important;
  margin-top: 3.2rem !important; border-top: 2px solid rgba(215,66,137,.28) !important;
  padding-top: 2.2rem !important; display:block !important;
}
.formas-pago__titulo{
  font-family: var(--font-body) !important; font-size:.78rem !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  color: var(--mek-fucsia) !important; font-weight:700 !important;
  margin:0 0 1.2rem !important;
}
.formas-pago__grid{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:14px !important;
}
@media (max-width:640px){ .formas-pago__grid{ grid-template-columns:repeat(2,1fr) !important } }

.pago{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  gap:10px !important; padding:20px 12px !important; text-align:center !important;
  background:#fff !important; border-radius:4px 18px 4px 18px !important;
  border:1px solid rgba(46,42,44,.08) !important;
}
.pago__icono{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
}
.pago__icono svg{ width:26px; height:26px }
.pago[data-color="efectivo"]      .pago__icono{ background:#DCF3E4; color:#2E8B57 }
.pago[data-color="transferencia"] .pago__icono{ background:#DEEAFB; color:#2C6BC9 }
.pago[data-color="tarjeta"]       .pago__icono{ background:#FBE4EF; color:#C2317A }
.pago[data-color="mp"]            .pago__icono{ background:#FFF0D6; color:#D08A00 }
.pago__texto{
  font-family:var(--font-body); font-size:.9375rem; font-weight:600; color:var(--mek-carbon);
  line-height:1.3;
}

.formas-pago__nota{
  margin:1.5rem 0 0 !important;
  background: var(--mek-fucsia-fondo) !important; color:#fff !important;
  padding:16px 22px !important; border-radius:4px 20px 4px 20px !important;
  font-family:var(--font-body) !important; font-weight:600 !important;
  font-size:1rem !important; text-align:center !important;
}

/* ==========================================================
   Tu primera visita — estructura real: .timeline-step
   Numero bien grande, titulo apenas menor
   ========================================================== */
#primera-visita .timeline{ border:0 !important; padding:0 !important; margin:0 !important }
#primera-visita .timeline-step{
  display: grid !important;
  grid-template-columns: 112px 1fr !important;
  column-gap: 20px !important; row-gap: 2px !important;
  align-items: start !important;
  padding: 24px 0 !important; margin: 0 !important;
  border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.24) !important;
  position: relative !important;
}
#primera-visita .timeline-step:last-child{ border-bottom: 0 !important }
#primera-visita .timeline-step::before,
#primera-visita .timeline-step::after{ content: none !important }

#primera-visita .timeline-step__marker{
  grid-column: 1 !important; grid-row: 1 / span 2 !important;
  font-family: var(--font-display) !important;
  font-size: 5.25rem !important; font-weight: 800 !important;
  line-height: .82 !important; letter-spacing: -.04em !important;
  color: rgba(255,255,255,.38) !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  width: auto !important; height: auto !important; min-width: 0 !important;
  border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
  display: block !important; text-align: right !important;
  position: static !important;
}
#primera-visita .timeline-step__content{ grid-column: 2 !important; padding: 0 !important }
#primera-visita .timeline-step__content h3{
  font-size: 1.6875rem !important; line-height: 1.26 !important;
  margin: 0 0 .4rem !important; color: #fff !important; padding-bottom: .1em !important;
}
#primera-visita .timeline-step__content p{
  margin: 0 !important; font-size: 1rem !important; line-height: 1.6 !important;
  color: rgba(255,255,255,.9) !important;
}
#primera-visita .primera-visita-img img{ border-radius: 4px 26px 4px 26px !important }

@media (max-width: 640px){
  #primera-visita .timeline-step{ grid-template-columns: 76px 1fr !important; column-gap: 14px !important }
  #primera-visita .timeline-step__marker{ font-size: 3.5rem !important }
  #primera-visita .timeline-step__content h3{ font-size: 1.3125rem !important }
}

/* la linea vertical del timeline viejo */
#primera-visita .timeline::before,
#primera-visita .timeline::after,
#primera-visita .timeline-step__content::before,
#primera-visita .timeline-step__marker::before,
#primera-visita .timeline-step__marker::after{ content:none !important; display:none !important }
#primera-visita .timeline{ border-left:0 !important; padding-left:0 !important }

/* ==========================================================
   TIPOGRAFIA FINAL — Familjen Grotesk (titulos) + Manrope (cuerpo)
   Familjen tiene descendentes normales: se acaba el tema de la "g"
   ========================================================== */
:root{
  --font-display: 'Familjen Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}
/* Familjen es mas angosta que Syne: recupero presencia con tamaño */
h1{ line-height:1.1 !important; padding-bottom:.06em !important }
h2{ line-height:1.14 !important; padding-bottom:.06em !important;
    font-size: clamp(2.5rem, 6.2vw, 4rem) !important }
h3{ line-height:1.26 !important; padding-bottom:.05em !important }
.section h2{ line-height:1.14 !important; padding-bottom:.06em !important }
.hero--loto h1{ line-height:1.08 !important; padding-bottom:.06em !important;
    font-size: clamp(2.75rem, 8.5vw, 5rem) !important }
.card-tratamiento h3{ font-size:1.5rem !important }
#primera-visita .timeline-step__content h3{ font-size:1.75rem !important }
#primera-visita .timeline-step__marker{ font-size:5.5rem !important; letter-spacing:-.03em !important }
@media (max-width:640px){
  #primera-visita .timeline-step__marker{ font-size:3.75rem !important }
  #primera-visita .timeline-step__content h3{ font-size:1.375rem !important }
}
/* los numeros siguen en Manrope, con cifras parejas */
.indicator__value, .precio, .price, .prices-dense-row *{
  font-family: var(--font-body) !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}

/* el scroll suave nativo peleaba con el salto directo */
html{ scroll-behavior: auto !important }

/* ==========================================================
   La etiqueta de seccion quedaba pisando la franja de color
   ========================================================== */
#objetivos, #resultados, #tratamientos, #tecnologia, #tambien-en-mek, #nosotros,
#primera-visita, #testimonios, #promociones, #precios, #faq, #reserva, #ubicacion{
  padding-top: 12rem !important;
}
@media (max-width:720px){
  #objetivos, #resultados, #tratamientos, #tecnologia, #tambien-en-mek, #nosotros,
  #primera-visita, #testimonios, #promociones, #precios, #faq, #reserva, #ubicacion{
    padding-top: 9.5rem !important;
  }
}
h2::before{ line-height:1.2 !important; padding:0 !important }

/* ==========================================================
   Precios: cada valor dentro de una pastilla fucsia
   ========================================================== */
#precios .prices-dense-row{
  background-position: 0 1.55em !important;
  min-height: 3.4em !important;
  align-items: center !important;
}
#precios .prices-dense-row > *:first-child{
  font-size: 1.0625rem !important; font-weight: 500 !important;
  padding: .5em 12px .5em 0 !important;
}
#precios .prices-dense-row > *:last-child{
  background: var(--mek-fucsia-fondo) !important;
  color: #fff !important;
  padding: .5em 1.05em !important;
  border-radius: 999px !important;
  font-size: 1rem !important; font-weight: 700 !important;
  margin-left: auto !important; white-space: nowrap !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
}
#precios .prices-dense-row:hover > *:last-child{ background:#A8306A !important }
@media (max-width:480px){
  #precios .prices-dense-row > *:first-child{ font-size:.9375rem !important; max-width:52% !important }
  #precios .prices-dense-row > *:last-child{ font-size:.875rem !important; padding:.45em .9em !important }
}

/* ==========================================================
   Aparicion al hacer scroll
   ========================================================== */
@media (prefers-reduced-motion: no-preference){
  .aparece{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .62s cubic-bezier(.22,1,.36,1), transform .62s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  .aparece--visible{ opacity: 1; transform: none }
}
/* si el navegador no ejecuta el script, nada queda invisible */
.no-js .aparece{ opacity:1 !important; transform:none !important }

/* el hero nunca se anima: tiene que estar legible desde el primer cuadro */
.hero .aparece{ opacity:1 !important; transform:none !important }

/* ==========================================================
   Precios: fuera la pastilla, vuelve el precio limpio
   ========================================================== */
#precios .prices-dense-row > *:last-child{
  background: transparent !important;
  color: var(--mek-fucsia) !important;
  padding: .55em 0 .55em 14px !important;
  border-radius: 0 !important;
  font-size: 1.125rem !important; font-weight: 800 !important;
}
#precios .prices-dense-row:hover > *:last-child{ background:transparent !important; color:#A8306A !important }
#precios .prices-dense-row{ min-height:3em !important; align-items:baseline !important }
#precios .prices-dense-row > *{ background: var(--t-claro) !important }
@media (max-width:480px){
  #precios .prices-dense-row > *:last-child{ font-size:1rem !important; padding-left:10px !important }
}

/* ==========================================================
   ANIMACIONES CON MAS PRESENCIA
   ========================================================== */
@media (prefers-reduced-motion: no-preference){

  /* titulos: se revelan desde detras de una linea, como en editorial */
  .titulo-revela{
    clip-path: inset(0 0 110% 0);
    transform: translateY(24px);
    transition: clip-path .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
  }
  .titulo-revela.aparece--visible{ clip-path: inset(0 0 -30% 0); transform:none }

  /* tarjetas: mas recorrido y una pizca de escala */
  .aparece{
    opacity:0; transform: translateY(38px) scale(.97);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .aparece--visible{ opacity:1; transform:none }

  /* fotos: entran apenas mas grandes y se asientan */
  .foto-entra img{ transform: scale(1.09); transition: transform 1.1s cubic-bezier(.22,1,.36,1) }
  .foto-entra.aparece--visible img{ transform: scale(1) }

  /* filas de precio: entran desde la izquierda, escalonadas */
  #precios .prices-dense-row.aparece{ transform: translateX(-18px); opacity:0 }
  #precios .prices-dense-row.aparece--visible{ transform:none; opacity:1 }

  /* pasos de la primera visita: el numero llega despues que el texto */
  #primera-visita .timeline-step.aparece .timeline-step__marker{
    opacity:0; transform: translateX(-26px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1) .18s, transform .8s cubic-bezier(.22,1,.36,1) .18s;
  }
  #primera-visita .timeline-step.aparece--visible .timeline-step__marker{ opacity:1; transform:none }

  /* botones y pastillas: leve levantada al pasar por encima */
  .btn{ transition: transform .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease }
  .btn:hover{ transform: translateY(-2px) }
  .card-tratamiento, .card-belleza, .perfil-card{
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
  }
  .card-tratamiento:hover, .card-belleza:hover, .perfil-card:hover{
    transform: translateY(-5px); border-color: var(--mek-fucsia) !important;
  }
}

/* ==========================================================
   El boton quedaba negro al tocarlo: en celular el :hover
   se queda pegado. Los hover solo para mouse.
   ========================================================== */
@media (hover: none){
  .btn:hover, .btn--outline:hover, #btn-ver-todos:hover,
  .filtro-aviso .btn--outline:hover,
  #tratamientos .card-tratamiento .btn--outline:hover,
  .card-tratamiento:hover, .card-belleza:hover, .perfil-card:hover{
    background: inherit !important;
    color: inherit !important;
    transform: none !important;
  }
  #btn-ver-todos:hover, .filtro-aviso .btn--outline:hover{
    background: transparent !important; color: var(--mek-carbon) !important;
    border-color: var(--mek-carbon) !important;
  }
  #tratamientos .card-tratamiento .btn--outline:hover{
    background: transparent !important; color: var(--mek-carbon) !important;
  }
  .btn--primary:hover{ background: var(--mek-fucsia-fondo) !important; color:#fff !important }
}
/* y en cualquier caso, al soltar vuelve a su estado */
#btn-ver-todos, .filtro-aviso .btn--outline{
  -webkit-tap-highlight-color: transparent;
}
#btn-ver-todos:focus, #btn-ver-todos:active{
  background: transparent !important; color: var(--mek-carbon) !important;
  border-color: var(--mek-carbon) !important;
}
#btn-ver-todos:focus-visible{
  outline: 3px solid var(--mek-fucsia) !important; outline-offset: 2px !important;
}

/* ==========================================================
   1. PORTADA — degradado en movimiento, tipo seda
   ========================================================== */
.hero--loto{
  background:
    radial-gradient(58% 48% at 22% 26%, #CC3C7A 0%, transparent 62%),
    radial-gradient(52% 46% at 82% 22%, #C13873 0%, transparent 58%),
    radial-gradient(64% 58% at 68% 82%, #7E1F4E 0%, transparent 64%),
    radial-gradient(56% 52% at 18% 84%, #A82F68 0%, transparent 60%),
    linear-gradient(150deg, #BE3675 0%, #96295C 100%) !important;
  background-size: 180% 180%, 170% 170%, 190% 190%, 175% 175%, 100% 100% !important;
  position: relative; overflow: hidden;
}
@media (prefers-reduced-motion: no-preference){
  .hero--loto{ animation: seda 26s ease-in-out infinite alternate }
}
@keyframes seda{
  0%   { background-position:  0%  10%,  92%   4%,  74%  92%,  10%  88%, 0 0 }
  33%  { background-position: 28%  38%,  62%  28%,  40%  70%,  38%  62%, 0 0 }
  66%  { background-position: 62%  16%,  24%  46%,  14%  86%,  70%  34%, 0 0 }
  100% { background-position: 96%  46%,   6%  14%,  46%  56%,  92%  76%, 0 0 }
}

/* partículas de luz que suben despacio */
.hero__particulas{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.hero__particulas i{
  position:absolute; bottom:-12%; display:block; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 68%);
  opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .hero__particulas i{ animation: subir linear infinite }
}
@keyframes subir{
  0%   { transform: translateY(0) translateX(0) scale(.7); opacity:0 }
  12%  { opacity:.85 }
  80%  { opacity:.5 }
  100% { transform: translateY(-118vh) translateX(var(--dx,14px)) scale(1.25); opacity:0 }
}

/* ==========================================================
   2. Zoom de la foto al pasar por encima o tocar la tarjeta
   ========================================================== */
.card-tratamiento picture, .card-tratamiento__img,
.card-belleza__foto, .perfil-card > div:first-child{
  overflow: hidden !important;
}
.card-tratamiento img, .card-belleza__foto img, .perfil-card img{
  transition: transform .65s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover){
  .card-tratamiento:hover img, .card-belleza:hover img, .perfil-card:hover img{
    transform: scale(1.07);
  }
}
.card-tratamiento:active img, .card-belleza:active img{ transform: scale(1.05) }

/* ==========================================================
   3. Barra fija de acción en el celular
   ========================================================== */
.barra-accion{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 240;
  display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(215,66,137,.22);
  transform: translateY(110%);
  transition: transform .34s cubic-bezier(.22,1,.36,1);
}
.barra-accion.visible{ transform: none }
.barra-accion a{
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 10px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
}
.barra-accion .accion--reservar{ background: var(--mek-fucsia-fondo); color: #fff }
.barra-accion .accion--llamar{
  background: transparent; color: var(--mek-carbon);
  border: 1.5px solid rgba(46,42,44,.28);
}
.barra-accion svg{ width: 19px; height: 19px }
.barra-accion__nota{
  position:absolute; top:-26px; left:0; right:0; text-align:center;
  font-size:.75rem; font-family:var(--font-body); color:#fff;
}
.barra-accion__nota span{
  background: var(--mek-carbon); padding:4px 12px; border-radius:999px;
}
@media (max-width: 820px){
  .barra-accion{ display: flex }
  body{ padding-bottom: 78px }
  /* el WhatsApp flotante sube para no chocar con la barra */
  .whatsapp-float, .btn-whatsapp-float, [class*="whatsapp"][class*="float"]{
    bottom: 96px !important;
  }
}

/* ==========================================================
   4. Barra de progreso de lectura
   ========================================================== */
.progreso-lectura{
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #F06BA8, var(--mek-fucsia-fondo));
  z-index: 500; transition: width .1s linear; pointer-events: none;
}

/* ==========================================================
   5. Marquesina de aparatología
   ========================================================== */
.marquesina{ overflow:hidden; margin-top:2.4rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.marquesina__pista{ display:flex; gap:3rem; width:max-content }
@media (prefers-reduced-motion: no-preference){
  .marquesina__pista{ animation: desfilar 34s linear infinite }
}
.marquesina span{
  font-family: var(--font-display); font-weight:700; font-size:1.35rem;
  color: rgba(255,255,255,.42); white-space:nowrap; letter-spacing:-.01em;
}
@keyframes desfilar{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* parallax suave en fotos grandes */
@media (prefers-reduced-motion: no-preference){
  .parallax{ will-change: transform }
}

/* la foto que se destaca en la demo del antes/despues */
.ba-par__item{ transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease }
.ba-par__item.destacado{ transform: scale(1.035); box-shadow: 0 8px 30px rgba(168,48,106,.28) }

/* ==========================================================
   Ahorro visible en las promos
   ========================================================== */
.ahorro{ display:block; margin-top:6px; line-height:1.4 }
.ahorro s{
  display:block; color:#8A8486; font-size:.8125rem; font-weight:500;
  text-decoration-thickness:1.5px;
}
.ahorro b{
  display:inline-block; margin-top:4px;
  background:var(--mek-fucsia-fondo); color:#fff;
  padding:4px 11px; border-radius:999px;
  font-size:.78rem; font-weight:800; letter-spacing:.02em;
  font-family:var(--font-body);
}

/* ==========================================================
   Promos de depilacion con el ahorro a la vista
   ========================================================== */
.promos-genero{ margin: 2rem 0 }
.promos-genero__titulo{
  font-family: var(--font-body) !important; font-size:.76rem !important;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mek-fucsia) !important;
  font-weight:800 !important; margin:0 0 .9rem !important;
}
.promos-lista{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.promo{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 18px; background:#fff;
  border:1px solid rgba(215,66,137,.20); border-radius:4px 20px 4px 20px;
}
.promo__texto{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.promo__nombre{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; color:var(--mek-carbon) }
.promo__zonas{ font-size:.875rem; color:#6B6468; line-height:1.45 }
.promo__precio{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; white-space:nowrap }
.promo__precio s{ color:#9A9296; font-size:.8125rem; text-decoration-thickness:1.5px }
.promo__precio strong{
  font-family:var(--font-body); font-size:1.25rem; font-weight:800; color:var(--mek-fucsia);
  font-variant-numeric: tabular-nums lining-nums;
}
.promo__ahorro{
  background:var(--mek-fucsia-fondo); color:#fff; padding:3px 10px; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.02em; font-family:var(--font-body);
}
@media (max-width:520px){
  .promo{ flex-direction:column; align-items:flex-start; gap:10px }
  .promo__precio{ align-items:flex-start; flex-direction:row; align-items:baseline; flex-wrap:wrap }
}

/* ==========================================================
   Barra de accion: un solo boton, mas compacta
   ========================================================== */
.barra-accion{ padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important }
.barra-accion__nota{ display:none !important }
.barra-accion a{
  flex-direction: column !important; gap: 1px !important;
  padding: 11px 14px !important; line-height: 1.2 !important;
}
.barra-accion .accion--reservar{
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex-direction: row !important; gap: 9px !important; flex-wrap: wrap;
}
.barra-accion .accion--reservar span{ font-size:.9375rem; font-weight:800 }
.barra-accion .accion--reservar em{
  flex-basis: 100%; text-align: center; font-style: normal;
  font-size: .6875rem; font-weight: 600; opacity: .88; margin-top: 1px;
}
.barra-accion svg{ width:18px !important; height:18px !important; flex:0 0 auto }
@media (max-width: 820px){ body{ padding-bottom: 66px } }

/* ==========================================================
   El antes/despues no hace zoom: destaca el DESPUES, que es
   lo que importa mostrar, y con luz en vez de escala
   ========================================================== */
.ba-par__item img{ transform: none !important }
.ba-par__item.destacado{ transform: none !important; box-shadow: none !important }
.ba-par__item{ position: relative; transition: none !important }
.ba-par__item::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  box-shadow: inset 0 0 0 0 rgba(215,66,137,0);
  transition: box-shadow .6s ease;
}
.ba-par__item.destacado::after{
  box-shadow: inset 0 0 0 3px rgba(215,66,137,.9), 0 0 26px rgba(215,66,137,.28);
}
.ba-par__item.destacado figcaption{ color: var(--mek-fucsia) !important; font-weight:800 }

/* ==========================================================
   Planes de sesiones
   ========================================================== */
.planes__bajada{ max-width:60ch; margin:0 0 2.4rem; color:#5A5457; font-size:1.0625rem; line-height:1.65 }
.planes-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px }
.plan{
  display:flex; flex-direction:column; gap:10px; padding:26px 24px;
  background:#fff; border:1.5px solid rgba(215,66,137,.24);
  border-radius:4px 26px 4px 26px; position:relative; overflow:hidden;
}
.plan::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#F06BA8,var(--mek-fucsia-fondo));
}
.plan__categoria{
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mek-fucsia); font-weight:800;
}
.plan__nombre{ font-size:1.5rem !important; margin:0 !important; color:var(--mek-carbon) !important }
.plan__incluye{ list-style:none; margin:.2rem 0 .6rem; padding:0; display:grid; gap:7px }
.plan__incluye li{
  font-family:var(--font-body); font-size:.9375rem; color:#5A5457;
  display:flex; align-items:baseline; gap:9px; line-height:1.45;
}
.plan__incluye b{
  flex:0 0 auto; min-width:26px; height:26px; border-radius:50%;
  background:var(--bg-suave); color:#A8306A; font-weight:800; font-size:.8125rem;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
}
.plan__precios{ display:flex; align-items:baseline; gap:12px; margin-top:auto; padding-top:.5rem }
.plan__precios s{ color:#9A9296; font-size:1rem; text-decoration-thickness:1.5px }
.plan__precios strong{
  font-family:var(--font-body); font-size:1.75rem; font-weight:800; color:var(--mek-carbon);
  font-variant-numeric:tabular-nums lining-nums; line-height:1;
}
.plan__ahorro{
  align-self:flex-start; background:var(--mek-fucsia-fondo); color:#fff;
  padding:6px 14px; border-radius:999px; font-family:var(--font-body);
  font-size:.8125rem; font-weight:800;
}
.plan__cta{ margin-top:.7rem; text-align:center; width:100% }
.planes__nota{ margin:2rem 0 0; font-size:.9375rem; color:#6B6468 }
@media (max-width:520px){
  .plan{ padding:22px 20px }
  .plan__precios strong{ font-size:1.5rem }
}

/* ==========================================================
   PAQUETES — jerarquia clara y menos alto
   ========================================================== */
.planes-grid{ grid-template-columns:repeat(auto-fit,minmax(276px,1fr)) !important; gap:16px !important; align-items:stretch }
.plan{
  display:flex !important; flex-direction:column !important; gap:0 !important;
  padding:0 !important; overflow:hidden;
  border:1.5px solid rgba(215,66,137,.22) !important;
  border-radius:4px 24px 4px 24px !important; background:#fff !important;
}
.plan__cabecera{ padding:20px 20px 12px }
.plan__categoria{ display:block; margin-bottom:5px }
.plan__nombre{ font-size:1.375rem !important; line-height:1.2 !important; margin:0 0 5px !important }
.plan__desc{ margin:0 !important; font-size:.875rem !important; line-height:1.45 !important; color:#6B6468 !important }

.plan__cuerpo{ padding:0 20px 14px; border-bottom:1px solid rgba(46,42,44,.08) }
.plan__rotulo{
  display:block; font-family:var(--font-body); font-size:.66rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:#9A9296; margin:0 0 8px;
}
.plan__incluye{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.plan__incluye li{ display:flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:.9375rem; color:var(--mek-carbon); line-height:1.35 }
.plan__incluye b{
  flex:0 0 auto; min-width:25px; height:25px; border-radius:7px;
  background:var(--mek-fucsia-fondo); color:#fff; font-weight:800; font-size:.8125rem;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
}

.plan__pie{ padding:14px 20px 18px; margin-top:auto; display:flex; flex-direction:column; gap:9px }
.plan__valores{ display:flex; flex-direction:column; gap:1px }
.plan__anterior{ font-family:var(--font-body); font-size:.8125rem; color:#9A9296 }
.plan__anterior s{ text-decoration-thickness:1.5px }
.plan__actual{
  font-family:var(--font-body); font-size:2rem; font-weight:800; line-height:1;
  color:var(--mek-carbon); font-variant-numeric:tabular-nums lining-nums;
}
.plan__ahorro{
  align-self:flex-start; background:var(--mek-fucsia-fondo); color:#fff;
  padding:5px 13px; border-radius:999px; font-family:var(--font-body);
  font-size:.78rem; font-weight:800; letter-spacing:.01em;
}
.plan__cta{ width:100%; text-align:center; padding:13px !important; font-size:.9375rem !important }

/* paquete destacado, si algun dia se marca uno */
.plan--destacado{ border-color:var(--mek-fucsia) !important; border-width:2px !important }
/* El sello era una cinta en diagonal en la esquina, con la tarjeta en
   overflow:hidden. Cualquier texto de mas de dos palabras se cortaba
   ("NUESTRA RECOMENDACION" se veia como "RA RECOMENDACION").
   Ahora es una franja horizontal arriba de la tarjeta: no se puede
   cortar por mas que cambie el texto, y se lee de una. */
.plan__sello{
  position:static; display:block; width:100%; box-sizing:border-box;
  transform:none; top:auto; right:auto;
  background:var(--mek-fucsia-fondo); color:#fff;
  padding:8px 16px; text-align:center;
  font-family:var(--font-body); font-size:.6875rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.3;
}
/* la franja ya hace de remate superior, la linea de 4px sobraria */
.plan--destacado::before{ display:none }
.plan{ position:relative }

/* el WhatsApp flotante no puede taparlos */
@media (max-width:820px){
  #promociones .plan__cta{ margin-bottom:0 }
  .planes-grid{ padding-bottom:8px }
}
@media (max-width:400px){
  .plan__nombre{ font-size:1.25rem !important }
  .plan__actual{ font-size:1.75rem }
  .plan__cabecera{ padding:18px 16px 10px }
  .plan__cuerpo{ padding:0 16px 12px }
  .plan__pie{ padding:12px 16px 16px }
}

/* ==========================================================
   Menos repeticion de "Reservar": en celular queda la barra,
   el flotante de WhatsApp se oculta
   ========================================================== */
@media (max-width:820px){
  .whatsapp-float, .btn-whatsapp-float, [class*="whatsapp"][class*="float"],
  a[class*="float"][href*="wa.me"]{ display:none !important }
}

/* ==========================================================
   Soporte de las animaciones nuevas
   ========================================================== */
@media (prefers-reduced-motion: no-preference){

  /* la pastilla de ahorro entra con rebote */
  .plan__ahorro{ opacity:0; transform: scale(.7) translateY(6px) }
  .plan__ahorro.ahorro-entra{
    opacity:1; transform:none;
    animation: rebote .58s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes rebote{
    0%  { opacity:0; transform: scale(.7) translateY(8px) }
    60% { opacity:1; transform: scale(1.09) translateY(0) }
    100%{ opacity:1; transform: scale(1) }
  }

  /* la flor se abre un poco mas al bajar */
  .hero__loto .loto__flor{
    transform: scale(var(--apertura, 1));
    transition: transform .35s ease-out, opacity .35s ease-out;
    transform-origin: 50% 78%;
  }

  /* tilde al tocar WhatsApp */
  a[href*="wa.me"]{ position: relative }
  a[href*="wa.me"].confirmando > svg{ opacity: 0 }
  a[href*="wa.me"].confirmando::before{
    content:""; position:absolute; left:50%; top:50%; width:16px; height:9px;
    border-left:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
    transform: translate(-50%,-60%) rotate(-45deg) scale(0);
    animation: tildeEntra .34s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  .barra-accion a.confirmando::before{ left:34px }
  @keyframes tildeEntra{ to{ transform: translate(-50%,-60%) rotate(-45deg) scale(1) } }

  /* onda al tocar */
  .onda{
    position:absolute; border-radius:50%; pointer-events:none;
    background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
    transform: scale(0); opacity:.9;
    animation: expandirOnda .6s ease-out forwards;
  }
  .btn--outline .onda, .objetivo-card .onda{
    background: radial-gradient(circle, rgba(215,66,137,.32), rgba(215,66,137,0) 70%);
  }
  @keyframes expandirOnda{ to{ transform: scale(1); opacity:0 } }
  .btn, .objetivo-card, .plan__cta{ overflow: hidden }
}

/* el header cambia de color segun la seccion */
.main-header{ transition: background-color .4s ease, border-color .4s ease }
.main-header.header--oscuro{ background: rgba(46,27,36,.94) !important; backdrop-filter: blur(10px) }
.main-header.header--fucsia{ background: rgba(168,48,106,.94) !important; backdrop-filter: blur(10px) }
.main-header.header--oscuro a, .main-header.header--fucsia a,
.main-header.header--oscuro .main-nav a, .main-header.header--fucsia .main-nav a{ color:#fff !important }
.main-header.header--oscuro .logo-img, .main-header.header--fucsia .logo-img{
  filter: brightness(0) invert(1);
}
.main-header.header--oscuro .main-header__cta, .main-header.header--fucsia .main-header__cta{
  background:#fff !important; color:#A8306A !important; border-color:#fff !important;
}

/* si no hay JS o falla el observador, la pastilla igual se ve */
@media (prefers-reduced-motion: reduce){ .plan__ahorro{ opacity:1 !important; transform:none !important } }
.no-js .plan__ahorro{ opacity:1 !important; transform:none !important }

/* ==========================================================
   La pastilla de ahorro es visible SIEMPRE por defecto.
   El rebote es un agregado, no una condicion para verla.
   ========================================================== */
.plan__ahorro{ opacity: 1 !important; transform: none !important }
@media (prefers-reduced-motion: no-preference){
  .plan__ahorro.ahorro-entra{ animation: rebote .58s cubic-bezier(.34,1.56,.64,1) both }
}
@keyframes rebote{
  0%  { opacity:0; transform: scale(.72) translateY(8px) }
  60% { opacity:1; transform: scale(1.09) }
  100%{ opacity:1; transform: scale(1) }
}

/* ==========================================================
   CONTRASTE — texto chico en fucsia
   El fucsia de marca (#D74289) da 3,98 sobre hueso y 3,48 sobre nude.
   El minimo para texto chico es 4,5. Estos son los lugares donde el
   fucsia aparece en tamanos por debajo de 18px, corregidos al tono
   oscuro (#A8306A: 6,07 sobre hueso / 5,31 sobre nude).
   El fucsia de marca se mantiene sin tocar en bordes, iconos y titulos.
   ========================================================== */
#nosotros .perfil-card small,
#nosotros .perfil-card > div small,
.card-tratamiento__datos strong,
#tratamientos .card-tratamiento__datos strong,
#precios th,
#precios .prices-category,
#precios .prices-dense-row:hover > *:first-child,
#precios .formas-pago-info h3,
#precios h2::before,
#precios .prices-dense-row > *:last-child,
.formas-pago__titulo,
.promos-genero__titulo,
.promo__precio strong,
.plan__categoria,
.ba-par__item figcaption,
.ba-par__item:last-child figcaption,
.ba-par__item.destacado figcaption{
  color: var(--mek-fucsia-texto) !important;
}

/* Sobre el fondo ciruela pasa lo contrario: hay que aclararlo, no oscurecerlo.
   #F79ECA da 8,24 sobre #2E1B24. */
#tecnologia .equipo-card p[style*="mek-fucsia"],
#tecnologia .equipo__specs,
.seccion--oscura .plan__categoria,
.seccion--oscura .card-tratamiento__datos strong{
  color: var(--mek-fucsia-sobre-oscuro) !important;
}

/* ==========================================================
   DISPONIBILIDAD REAL
   Se edita en data/config.json. Urgencia honesta: no hay contador
   ni cupos inventados, solo lo que Silvia carga a mano.
   Por defecto visible: si la animacion no corre, igual se ve.
   ========================================================== */
.disponibilidad{
  display:flex; align-items:flex-start; gap:.75rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-left:3px solid #6FD08C;
  border-radius:4px 14px 4px 14px;
  padding:.85rem 1.1rem;
  margin:0 0 1.75rem;
  opacity:1; transform:none;
}
.disponibilidad__punto{
  width:9px; height:9px; border-radius:50%;
  background:#6FD08C; flex:0 0 9px; margin-top:.45rem;
  box-shadow:0 0 0 0 rgba(111,208,140,.65);
}
@media (prefers-reduced-motion: no-preference){
  .disponibilidad__punto{ animation: latir 2.4s ease-out infinite }
}
@keyframes latir{
  0%  { box-shadow:0 0 0 0 rgba(111,208,140,.55) }
  70% { box-shadow:0 0 0 9px rgba(111,208,140,0) }
  100%{ box-shadow:0 0 0 0 rgba(111,208,140,0) }
}
.disponibilidad__texto{
  display:block; color:#fff; font-weight:700;
  font-size:1rem; line-height:1.3;
}
.disponibilidad__detalle{
  display:block; margin-top:.2rem;
  color:rgba(255,255,255,.82); font-size:.875rem; line-height:1.45;
}

/* ===== Tratamientos plegados (ver arriba en main.js) ===== */
.card-tratamiento.trat--plegada{ display:none !important }

.ver-mas-envoltorio{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  margin-top:2.25rem;
}
.ver-mas-tratamientos{ min-height:48px; padding-left:2rem; padding-right:2rem }
.ver-mas-pista{
  font-size:.8125rem; color:var(--mek-gris-500); letter-spacing:.02em;
}

/* ==========================================================
   PRUEBA SOCIAL junto a los botones
   Las 59 opiniones sirven mas en el momento de decidir que
   arriba de todo. Contrastes calculados: ver AUDITORIA.md
   ========================================================== */
.prueba-social{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.5rem;
  margin:1.25rem 0 0;
  font-size:.9375rem; line-height:1.4;
}
.prueba-social__estrellas{ letter-spacing:.08em; font-size:1rem }
.prueba-social__texto b{ font-weight:800 }

/* El dorado claro sobre hueso da 2,05 de contraste: no se ve.
   Sobre carbon el mismo dorado da 6,56 y queda perfecto. */
.prueba-social--claro .prueba-social__estrellas { color:#96650F }   /* 4,80 sobre hueso */
.prueba-social--oscuro .prueba-social__estrellas{ color:#E8A33D }   /* 6,56 sobre carbon */

.prueba-social--claro{ color:var(--mek-gris-700) }
.prueba-social--claro a{ color:var(--mek-fucsia-texto); text-decoration:underline }

.prueba-social--oscuro{ justify-content:flex-start; color:rgba(255,255,255,.88) }
.prueba-social--oscuro a{ color:#fff; text-decoration:underline }

/* ==========================================================
   PUENTE ENTRE TRATAMIENTOS Y PLANES
   El ahorro se menciona donde la clienta ve el precio por sesion,
   que es cuando piensa "es caro", y no tres pantallas despues.
   ========================================================== */
.anzuelo-planes{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:2.5rem; padding:1.1rem 1.4rem;
  border:1.5px solid rgba(215,66,137,.42);
  border-radius:4px 22px 4px 22px;
  background:transparent; text-decoration:none;
  transition:border-color .25s ease, transform .25s ease;
}
.anzuelo-planes:hover, .anzuelo-planes:focus-visible{
  border-color:var(--mek-fucsia-texto); transform:translateY(-2px);
}
.anzuelo-planes__off{
  flex:0 0 auto; background:var(--mek-fucsia-fondo); color:#fff;
  font-size:.8125rem; font-weight:700; letter-spacing:.02em;
  padding:.4rem .8rem; border-radius:999px; white-space:nowrap;
}
.anzuelo-planes__off b{ font-weight:900 }
.anzuelo-planes__texto{
  flex:1 1 260px; color:var(--mek-gris-700);
  font-size:.9375rem; line-height:1.5;
}
.anzuelo-planes__flecha{
  flex:0 0 auto; color:var(--mek-fucsia-texto);
  font-size:1.35rem; line-height:1;
  transition:transform .25s ease;
}
.anzuelo-planes:hover .anzuelo-planes__flecha{ transform:translateX(4px) }
@media (hover:none){
  .anzuelo-planes:hover{ transform:none; border-color:rgba(215,66,137,.42) }
  .anzuelo-planes:hover .anzuelo-planes__flecha{ transform:none }
}

/* ===== etiqueta "tiene plan" en la lista de precios =====
   OJO CON LA ESPECIFICIDAD: mas arriba hay un
   #precios .prices-dense-row * { font-size: inherit !important }
   que le gana a cualquier regla de una sola clase. Sin el prefijo
   #precios .prices-dense-row, la etiqueta se dibuja a 17px y queda
   un cartel enorme en el medio de la lista.

   Relleno suave en vez de contorno: en una lista de 27 renglones con
   10 marcados, un borde por etiqueta hace demasiado ruido. */
#precios .prices-dense-row .etiqueta-plan,
.etiqueta-plan{
  display:inline-block; margin-left:.45rem;
  font-size:.6875rem !important;
  font-weight:700 !important;
  letter-spacing:.045em; line-height:1.7;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:var(--mek-fucsia-texto);
  background:rgba(168,48,106,.10);
  border:0; border-radius:3px;
  padding:0 .45rem;
  vertical-align:.12em;
  transition:background .2s ease, color .2s ease;
}
#precios .prices-dense-row .etiqueta-plan:hover,
#precios .prices-dense-row .etiqueta-plan:focus-visible,
.etiqueta-plan:hover, .etiqueta-plan:focus-visible{
  background:var(--mek-fucsia-texto); color:#fff;
}
.etiqueta-plan--muestra{ margin-left:0; pointer-events:none }

/* En celular la columna de nombres esta limitada al 52%. Con la etiqueta
   adentro, los nombres largos se partian en tres lineas y los renglones
   quedaban de alturas distintas. */
@media (max-width:480px){
  #precios .prices-dense-row > *:first-child{ max-width:64% !important }
  #precios .prices-dense-row .etiqueta-plan{
    font-size:.625rem !important; padding:0 .35rem; margin-left:.35rem;
  }
}
.precios__nota-plan{
  margin:-1.5rem 0 3rem; font-size:.875rem; line-height:1.6;
  color:var(--mek-gris-700);
}
.precios__nota-plan a{ color:var(--mek-fucsia-texto); font-weight:700 }

/* ==========================================================
   TAMBIEN EN MEK — version compacta
   ----------------------------------------------------------
   Son 4 servicios (unas, cejas, pestanas, lifting), los de menor
   ticket del catalogo. Con foto 4:3 cada tarjeta medía como una de
   tratamiento, asi que la seccion pesaba mas que medicina estetica,
   sobre todo en celular donde las 4 se apilan.
   Foto chica al costado y texto al lado: misma informacion, como un
   tercio del alto. No se oculta nada.
   ========================================================== */
#tambien-en-mek .belleza-grid{
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr)) !important;
  gap:12px !important;
}
#tambien-en-mek .card-belleza{
  flex-direction:row !important;
  align-items:center !important;
  gap:14px !important;
  padding:10px !important;
  overflow:hidden;
}
#tambien-en-mek .card-belleza__foto{
  flex:0 0 84px !important;
  width:84px !important; height:84px !important;
  aspect-ratio:1 !important;
  border-radius:3px 16px 3px 16px !important;
}
#tambien-en-mek .card-belleza__foto img{
  width:100% !important; height:100% !important; object-fit:cover !important;
}
#tambien-en-mek .card-belleza__content{
  padding:0 6px 0 0 !important;
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
#tambien-en-mek .card-belleza h3{
  font-size:1.0625rem !important; line-height:1.25 !important; margin:0 !important;
}
#tambien-en-mek .card-belleza p{
  font-size:.8125rem !important; line-height:1.45 !important;
  margin:0 !important; color:var(--mek-gris-700) !important;
}
/* el boton grande ocupaba una linea entera: pasa a enlace de texto */
#tambien-en-mek .card-belleza__cta{
  align-self:flex-start !important;
  margin:.35rem 0 0 !important; padding:0 !important;
  background:transparent !important; border:0 !important;
  min-height:0 !important; height:auto !important;
  color:var(--mek-fucsia-texto) !important;
  font-size:.8125rem !important; font-weight:700 !important;
  text-decoration:underline !important; text-underline-offset:3px;
}
#tambien-en-mek .card-belleza__cta:hover{
  background:transparent !important; color:var(--mek-fucsia-texto) !important;
}
@media (max-width:360px){
  #tambien-en-mek .card-belleza__foto{ flex-basis:68px !important; width:68px !important; height:68px !important }
  #tambien-en-mek .card-belleza h3{ font-size:1rem !important }
}

/* ==========================================================
   GRILLAS QUE NO DESBORDAN EN PANTALLAS ANGOSTAS
   ----------------------------------------------------------
   Varias grillas usan minmax(300px, 1fr) en estilo inline. Si el
   ancho disponible es menor a 300px —un celular de 320px con el
   padding del contenedor— la columna igual mide 300px y aparece
   scroll horizontal. min(300px, 100%) hace que la columna nunca
   sea mas ancha que su contenedor. En pantallas normales no cambia
   nada; solo actua cuando haria falta.
   ========================================================== */
.tratamientos-grid,
.testimonios-grid,
.belleza-grid,
.planes-grid,
.reserva-layout,
#tecnologia > .container > div[style*="minmax"],
#nosotros > .container > div[style*="minmax"],
#primera-visita > .container > div[style*="minmax"],
#ubicacion > .container > div[style*="minmax"]{
  grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
}
#tambien-en-mek .belleza-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(310px, 100%), 1fr)) !important;
}
.planes-grid{
  grid-template-columns:repeat(auto-fit, minmax(min(276px, 100%), 1fr)) !important;
}

/* nada puede empujar la pagina a lo ancho */
html, body{ overflow-x:hidden; max-width:100% }
img, picture, video, svg, table{ max-width:100% }

/* La ficha de Google esta a nombre de Silvia, no de MEK. Avisarlo antes
   de que haga clic evita que crea que se equivoco de lugar. */
.nota-ficha{
  margin:.9rem auto 0; max-width:46ch; text-align:center;
  font-size:.8125rem; line-height:1.5; color:var(--mek-gris-500);
}
.nota-ficha b{ color:var(--mek-gris-700); font-weight:700 }

/* ==========================================================
   PRECIOS AGRUPADOS POR CATEGORIA
   Eran 27 renglones seguidos. Los titulos parten la pared en
   cinco bloques para que la clienta vaya directo a lo suyo.
   El prefijo #precios es necesario: adentro de .prices-dense-grid
   hay reglas viejas con !important que pisan cualquier estilo
   de una sola clase.
   ========================================================== */
#precios .precios-grupo{
  margin:2.1rem 0 .1rem !important;
  padding:1.1rem 0 0 !important;
  border-top:1px solid rgba(215,66,137,.28);
  font-family:var(--font-body) !important;
  font-size:.75rem !important;
  font-weight:800 !important;
  letter-spacing:.16em; text-transform:uppercase;
  color:#6E6A6C !important;   /* 5,07 sobre hueso. El gris-500 daba 3,49 y no llega */
  line-height:1.4 !important;
}
#precios .precios-grupo:first-child{
  margin-top:0 !important; padding-top:0 !important; border-top:0;
}
@media (max-width:480px){
  #precios .precios-grupo{
    margin:1.5rem 0 .1rem !important; padding-top:.9rem !important;
    font-size:.6875rem !important; letter-spacing:.13em;
  }
}

/* Aviso dentro de una tarjeta de plan. Hoy lo usa solo el pack de cabina
   solar: el descuento por volumen premia hacer mas sesiones, y ahi el
   aviso tiene que viajar con la oferta y no quedar escondido en la ficha. */
.plan__aviso{
  margin:.6rem 0 0 !important;
  padding:.55rem .7rem;
  background:#FFF7E6;
  border-left:3px solid #A87A14;   /* 3,61 sobre el fondo del aviso */
  border-radius:0;
  font-size:.75rem !important;
  line-height:1.5 !important;
  color:#5C4410 !important;
}

/* ==========================================================
   GIFT CARD
   Todo nace visible y usable. Los controles que solo tienen
   sentido con JavaScript salen con hidden en el HTML y los
   muestra el script, asi nunca queda un campo muerto.
   ========================================================== */
#gift-card .gift__bajada{
  max-width:60ch; margin:0 0 2.2rem;
  color:var(--mek-gris-700); font-size:1.0625rem; line-height:1.65;
}
.gift{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr));
  gap:18px; align-items:start;
}
.gift__bloque{
  border:1.5px solid rgba(215,66,137,.30);
  border-radius:4px 22px 4px 22px;
  padding:22px 22px 24px;
}
.gift__titulo{
  font-size:1.125rem !important; margin:0 0 .25rem !important;
  line-height:1.3 !important;
}
.gift__ayuda{
  margin:0 0 1.1rem; font-size:.875rem; line-height:1.5;
  color:var(--mek-gris-700);
}
.gift__montos{ display:flex; flex-wrap:wrap; gap:10px }
.gift__monto{
  flex:1 1 auto; min-width:96px; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1rem;
  border:1.5px solid rgba(168,48,106,.35); border-radius:4px 14px 4px 14px;
  background:transparent; color:var(--mek-fucsia-texto);
  font-weight:800; font-size:1rem; text-decoration:none;
  cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.gift__monto:hover, .gift__monto:focus-visible{
  border-color:var(--mek-fucsia-texto);
}
.gift__monto.is-elegido{
  background:var(--mek-fucsia-fondo); border-color:var(--mek-fucsia-fondo); color:#fff;
}
.gift__libre{ margin-top:14px }
.gift__libre label, .gift__label, .gift__de label{
  display:block; margin-bottom:.35rem;
  font-size:.8125rem; font-weight:700; color:var(--mek-gris-700);
}
.gift__libre input, .gift__de input, .gift__select{
  width:100%; min-height:48px; box-sizing:border-box;
  padding:.6rem .8rem;
  border:1.5px solid rgba(46,42,44,.22); border-radius:4px;
  background:#fff; color:var(--mek-carbon);
  font-family:var(--font-body); font-size:1rem;
}
.gift__libre input:focus, .gift__de input:focus, .gift__select:focus{
  outline:none; border-color:var(--mek-fucsia-texto);
  box-shadow:0 0 0 3px rgba(168,48,106,.18);
}
.gift__libre small{
  display:block; margin-top:.3rem;
  font-size:.75rem; color:var(--mek-gris-700);
}
.gift__cierre{ margin-top:1.8rem; text-align:center }
.gift__de{ max-width:320px; margin:0 auto 1.1rem; text-align:left }
.gift__resumen{
  margin:0 auto 1rem; max-width:46ch;
  font-size:1.0625rem; font-weight:700; color:var(--mek-fucsia-texto);
}
.gift__cta{ min-height:52px }
.gift__nota{
  margin:1rem auto 0; max-width:52ch;
  font-size:.875rem; line-height:1.6; color:var(--mek-gris-700);
}
@media (hover:none){
  .gift__monto:hover{ border-color:rgba(168,48,106,.35) }
  .gift__monto.is-elegido:hover{ border-color:var(--mek-fucsia-fondo) }
}

/* La seccion nueva se mete entre precios y preguntas frecuentes, asi que
   la cadena de fondos se corre un lugar a partir de aca. */
#gift-card{ background:var(--mek-nude) !important }
#faq{ background:var(--mek-hueso) !important }

/* ==========================================================
   CAMPANA POR FECHA  (hoy: Dia de la Madre)
   ----------------------------------------------------------
   Todo esto desaparece solo cuando pasa la fecha, porque el PHP
   deja de imprimirlo y la clase .hay-campana no se agrega al body.
   No hace falta borrar CSS despues: queda dormido hasta la
   proxima campana.
   ========================================================== */

/* --- franja de arriba de todo --- */
.franja-campana{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.3rem 1rem;
  padding:.7rem 1.1rem;
  background:#2E1B24; color:#fff; text-decoration:none;
  font-size:.9375rem; line-height:1.35; text-align:center;
  border-bottom:2px solid var(--mek-fucsia-fondo);
}
.franja-campana__titulo{ font-weight:800; letter-spacing:.01em }
.franja-campana__detalle{ color:rgba(255,255,255,.86); font-size:.875rem }
.franja-campana__flecha{ transition:transform .25s ease }
.franja-campana:hover .franja-campana__flecha{ transform:translateX(4px) }
@media (hover:none){ .franja-campana:hover .franja-campana__flecha{ transform:none } }
@media (max-width:480px){
  .franja-campana{ font-size:.875rem; padding:.6rem .9rem }
  .franja-campana__detalle{ font-size:.8125rem }
  .franja-campana__flecha{ display:none }
}

/* --- la seccion --- */
#campana{ background:var(--mek-nude) !important }
.campana__fecha{
  display:inline-block; margin-bottom:.5rem;
  font-family:var(--font-body); font-size:.75rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--mek-fucsia-texto);
}
#campana .campana__titulo{ margin:0 0 .6rem !important }
.campana__bajada{
  max-width:58ch; margin:0 0 2.2rem;
  color:var(--mek-gris-700); font-size:1.0625rem; line-height:1.65;
}
.campana-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%), 1fr));
  gap:16px; align-items:stretch;
}
.campana-card{
  display:flex; flex-direction:column; gap:.4rem;
  padding:22px 22px 24px;
  background:#fff;
  border:1.5px solid rgba(215,66,137,.30);
  border-radius:4px 22px 4px 22px;
}
.campana-card__etiqueta{
  font-family:var(--font-body); font-size:.6875rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--mek-fucsia-texto);
}
#campana .campana-card__nombre{
  font-size:1.25rem !important; line-height:1.25 !important; margin:0 !important;
}
.campana-card__detalle{
  margin:0; font-size:.875rem; line-height:1.5; color:var(--mek-gris-700);
}
.campana-card__precio{
  margin-top:.5rem;
  font-family:var(--font-body); font-size:1.5rem; font-weight:800;
  color:var(--mek-fucsia-texto); line-height:1.1;
}
.campana-card__cta{ margin-top:auto; padding-top:.8rem; min-height:48px }
#campana .campana-card__cta{ margin-top:1rem !important }
.campana__pie{
  margin:1.6rem 0 0; font-size:.9375rem; line-height:1.6; color:var(--mek-gris-700);
}
.campana__pie a{ color:var(--mek-fucsia-texto); font-weight:700 }

/* --- la cadena de fondos se corre un lugar mientras dure la campana --- */
.hay-campana #campana::before{
  content:"" !important; position:absolute; inset:0 0 auto 0;
  height:130px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,var(--t-fucsia), var(--t-suave));
}
.hay-campana #campana{ position:relative; padding-top:9.5rem !important }
.hay-campana #objetivos::before{
  background:linear-gradient(180deg,var(--t-suave), var(--t-claro)) !important;
}
@media (max-width:720px){
  .hay-campana #campana{ padding-top:7.5rem !important }
}

/* ==========================================================
   IDENTIDAD VIOLETA DE LA CAMPANA
   ----------------------------------------------------------
   Los colores salen medidos de las dos gift cards que diseno
   Franco: la clara (#F9F4FB de fondo, #802B7E de texto) y la
   oscura (#57225A). La campana usa violeta; el resto del sitio
   sigue en fucsia. Cuando la campana termina, el violeta se va
   con ella porque solo vive dentro de .hay-campana y #campana.
   ========================================================== */
:root{
  --campana-oscuro:  #57225A;   /* berenjena de la tarjeta oscura */
  --campana-profundo:#2E0734;   /* el extremo del degradado */
  --campana-texto:   #802B7E;   /* violeta de los titulos, 7,17 sobre lavanda */
  --campana-claro:   #F6EDF8;   /* lavanda de fondo */
  --campana-borde:   rgba(128,43,126,.28);
}

/* --- la franja de arriba pasa a violeta --- */
.franja-campana{
  background:linear-gradient(90deg, var(--campana-profundo), var(--campana-oscuro) 55%, var(--campana-texto));
  border-bottom-color:var(--campana-texto);
}

/* --- la seccion --- */
#campana{ background:var(--campana-claro) !important }
.campana__fecha{ color:var(--campana-texto) !important }
#campana .campana__titulo{ color:var(--campana-oscuro) !important }
.campana-card{ border-color:var(--campana-borde) }
.campana-card__etiqueta{ color:var(--campana-texto) !important }
.campana-card__precio{ color:var(--campana-texto) !important }
.campana__pie a{ color:var(--campana-texto) !important }
#campana .btn--primary{
  background:var(--campana-texto) !important;
  border-color:var(--campana-texto) !important;
  color:#fff !important;
}
#campana .btn--primary:hover{
  background:var(--campana-oscuro) !important;
  border-color:var(--campana-oscuro) !important;
}
@media (hover:none){
  #campana .btn--primary:hover{
    background:var(--campana-texto) !important; border-color:var(--campana-texto) !important;
  }
}

/* la franja de transicion hacia la campana, en violeta */
.hay-campana #campana::before{
  background:linear-gradient(180deg, var(--t-fucsia), var(--campana-claro)) !important;
}
.hay-campana #objetivos::before{
  background:linear-gradient(180deg, var(--campana-claro), var(--t-claro)) !important;
}

/* --- las dos tarjetas para elegir --- */
.campana-disenos{ margin-top:2.6rem }
#campana .campana-disenos__titulo{
  font-family:var(--font-body) !important;
  font-size:.75rem !important; font-weight:800 !important;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--campana-texto) !important;
  margin:0 0 1rem !important;
}
.campana-disenos__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr));
  gap:16px;
}
.campana-diseno{ margin:0 }
.campana-diseno img{
  display:block; width:100%; height:auto;
  border-radius:4px 18px 4px 18px;
  border:1px solid var(--campana-borde);
}
.campana-diseno figcaption{
  margin-top:.5rem; text-align:center;
  font-size:.8125rem; font-weight:700; color:var(--campana-texto);
}
.campana-disenos__nota{
  margin:1rem 0 0; font-size:.8125rem; line-height:1.5; color:var(--mek-gris-700);
}