/* =========================
   VARIABLES / BASE
========================= */
:root{
  --bg-base:#fdfbf9;
  --accent:#c5a47e;
  --text-main:#2a2a2a;
  --text-light:#666;
  --glass:rgba(255,255,255,0.6);

  --card-1:#f4efea;
  --card-2:#edf1f4;
  --card-3:#f5f0f2;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:'Plus Jakarta Sans', sans-serif;
  background-color:var(--bg-base);
  color:var(--text-main);
  overflow-x:hidden;
}

/* =========================
   FONDO MESH
========================= */
.mesh-bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(at 0% 0%, #f3e7e9 0%, transparent 40%),
    radial-gradient(at 100% 100%, #e3eeff 0%, transparent 40%),
    radial-gradient(at 50% 50%, #fdfbf9 0%, transparent 60%);
  z-index:-1;
  transform:scale(1.1);
}

/* =========================
   NAVBAR
========================= */
.navbar{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  padding:20px 40px;
  background:var(--glass);
  backdrop-filter:blur(20px);
  border-radius:100px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
  border:1px solid rgba(255,255,255,0.3);
  transition:0.35s ease;
}

.navbar.scrolled{
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

/* Logo (imagen) */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.brand-logo{
  height:65px;
  width:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.12));
}

.contact-info{
  display:flex;
  align-items:center;
  gap:20px;
}

.contact-info .phone{
  font-size:0.95rem;
  letter-spacing:0.5px;
  color:var(--text-main);
  opacity:0.85;
}

/* Botón Agendar (Navbar) */
.btn-nav{
  padding:10px 22px;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:500;
  text-decoration:none;
  color:var(--accent);
  background:rgba(255,255,255,0.45);
  border:1px solid rgba(197,164,126,0.45);
  backdrop-filter:blur(12px);
  transition:all 0.3s ease;
}

.btn-nav:hover{
  background:rgba(197,164,126,0.15);
  color:var(--text-main);
  transform:translateY(-1px);
}

/* =========================
   HERO (BASE)
========================= */
.hero{
  height:100vh;
  display:flex;
  align-items:center;
  padding:0 10%;
  text-align:left;
}

.hero-content{
  max-width:720px;
}

.subtitle{
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:0.75rem;
  color:var(--accent);
  display:block;
  margin-bottom:20px;
}

h1{
  font-family:'Playfair Display', serif;
  font-size:clamp(3.5rem, 10vw, 7rem);
  line-height:0.9;
  margin-bottom:22px;
}

h1 em{
  font-weight:400;
  font-style:italic;
}

.hero-content p{
  max-width:560px;
  font-size:1.05rem;
  line-height:1.8;
  margin-bottom:26px;
}

/* =========================
   BOTONES (GLOBAL + HERO)
========================= */
.hero-buttons{
  display:flex;
  gap:18px;
  margin-top:14px;
  align-items:center;
  flex-wrap:wrap;
}

.btn-primary{
  display:inline-block;
  padding:16px 38px;
  background:var(--text-main);
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  font-size:0.95rem;
  font-weight:500;
  letter-spacing:0.3px;
  transition:0.3s ease;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

.btn-primary:hover{
  transform:scale(1.05);
  background:var(--accent);
}

.btn-secondary{
  display:inline-block;
  padding:16px 34px;
  border-radius:999px;
  text-decoration:none;
  font-size:0.95rem;
  font-weight:500;
  letter-spacing:0.3px;
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(0,0,0,0.08);
  color:var(--text-main);
  backdrop-filter:blur(16px);
  transition:0.3s ease;
}

.btn-secondary:hover{
  transform:scale(1.05);
  border-color:rgba(197,164,126,0.6);
}

/* =========================
   HERO CON IMAGEN (BANNER)
========================= */
.hero-image{
  position:relative;
  min-height:100vh;
  background-image:url("assets/img/hero-banner.jpg");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.05) 100%
  );
  z-index:1;
}

.hero-image .hero-content{
  position:relative;
  z-index:2;
  color:#fff;
}

.hero-image h1{ color:#fff; }
.hero-image p{ color:rgba(255,255,255,0.85); }

/* Botón secundario sobre imagen */
.hero-image .btn-secondary{
  background:rgba(255,255,255,0.25);
  border:1px solid rgba(255,255,255,0.4);
  color:#fff;
}

.hero-image .btn-secondary:hover{
  background:rgba(255,255,255,0.4);
}

/* Trust chips */
.trust{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:18px;
  color:rgba(255,255,255,0.85);
  font-size:0.95rem;
}

.trust span{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  padding:10px 14px;
  border-radius:999px;
  backdrop-filter:blur(12px);
}

/* =========================
   MOBILE FIX (NAVBAR + HERO)
========================= */
@media (max-width: 640px){

  /* Navbar más compacto */
  .navbar{
    top: 12px;
    width: 94%;
    padding: 12px 14px;
    border-radius: 22px;
  }

  /* Logo más pequeño en móvil */
  .brand-logo{
    height: 34px !important;  /* fuerza tamaño */
  }

  /* Oculta teléfono, deja solo Agendar */
  .contact-info{
    gap: 10px;
  }
  .contact-info .phone{
    display: none;
  }

  /* Botón agendar más compacto */
  .btn-nav{
    padding: 9px 16px;
    font-size: 0.88rem;
  }

  /* Hero: deja espacio por el navbar fijo */
  .hero{
    padding: 0 7%;
    min-height: 100vh;
    height: auto;
    padding-top: 120px; /* evita que el texto quede debajo del navbar */
  }

  /* Título hero más controlado */
  h1{
    font-size: clamp(2.6rem, 9vw, 4.2rem);
    line-height: 0.95;
    margin-bottom: 18px;
  }

  /* Texto hero más compacto */
  .hero-content p{
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 18px;
    max-width: 100%;
  }

  /* Trust chips: mejor layout */
  .trust{
    gap: 10px;
    margin-top: 14px;
    font-size: 0.9rem;
  }
  .trust span{
    padding: 9px 12px;
  }

  /* Botones: apilados full width */
  .hero-buttons{
    margin-top: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-buttons a{
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    font-size: 0.95rem;
  }

  /* Hero banner: centra mejor en móvil */
  .hero-image{
    background-position: center;
  }

  /* Overlay un poquito más oscuro en móvil para legibilidad */
  .hero-overlay{
    background: linear-gradient(
      90deg,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.42) 55%,
      rgba(0,0,0,0.10) 100%
    );
  }
}

/* =========================
   LAYOUT / SECCIONES
========================= */
.container{
  padding:100px 8%;
}

.section-title{
  font-family:'Playfair Display', serif;
  font-size:3rem;
  margin-bottom:18px;
}

.services-subtitle{
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:0.8rem;
  color:var(--accent);
  margin-bottom:18px;
}

.services-description{
  max-width:760px;
  font-size:1.05rem;
  line-height:1.9;
  color:var(--text-light);
  margin-bottom:70px;
}

/* =========================
   SERVICES GRID
========================= */

.services-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:34px;
}

/* =========================
   SERVICE CARD
========================= */

.service-card{
  border-radius:28px;
  padding:0;
  overflow:hidden;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(0,0,0,0.06);
  backdrop-filter:blur(16px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:
    transform .45s cubic-bezier(.175,.885,.32,1.275),
    box-shadow .45s ease;
}

.service-card:hover{
  transform:translateY(-10px);
  box-shadow:0 28px 60px rgba(0,0,0,0.08);
}

/* =========================
   IMAGEN
========================= */

.service-media{
  position:relative;
  width:calc(100% - 36px);
  margin:18px;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,0.04);
  border:1px solid rgba(0,0,0,0.18);
}

.service-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .6s ease;
}

.service-card:hover .service-media img{
  transform:scale(1.06);
}

/* =========================
   TIPOGRAFÍA
========================= */

/* Título del servicio */
.service-card h3{
  font-family:'Playfair Display', serif;
  font-size:1.45rem;              /* más elegante */
  font-weight:500;
  letter-spacing:0.2px;
  padding:8px 26px 6px;
  margin:0;
  color:var(--text-main);
}

/* Descripción */
.service-card p{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:0.95rem;
  line-height:1.75;
  padding:0 32px 28px;
  margin:0;
  color:var(--text-light);
  max-width:360px;                
}

/* =========================
   SERVICES HEADER (CENTRADO)
========================= */

#servicios{
  text-align:center;
}

#servicios .section-title{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

#servicios .services-subtitle{
  margin-top:14px;
  letter-spacing:4px;
  font-size:0.8rem;
  text-transform:uppercase;
  color:var(--accent);
}

#servicios .services-description{
  margin-top:22px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  font-size:1.08rem;
  line-height:1.9;
  color:var(--text-light);
}


/* =========================
   TREATMENT MENU – HEADER
========================= */

#treatments{
  text-align: center;
}

/* Subtítulo pequeño */
#treatments .services-subtitle{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 14px;
  font-size: 0.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
}

/* Título principal */
#treatments .section-title{
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  font-size: 3.2rem;              
}

/* Descripción */
#treatments .treatments-description{
  margin-left: auto;
  margin-right: auto;
  margin-top: 22px;
  max-width: 900px;
  font-size: 1.06rem;
  line-height: 1.9;
  color: var(--text-light);
}


.treatments-card{
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:28px;
  padding:26px 24px;
  backdrop-filter:blur(16px);
  transition:transform .45s cubic-bezier(.175,.885,.32,1.275), box-shadow .45s ease;
}

.treatments-card:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 60px rgba(0,0,0,0.08);
}

.treatments-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(0,0,0,0.06);
  margin-bottom:16px;
}

.treatments-card h3{
  font-family:'Playfair Display', serif;
  font-size:1.5rem;
  margin:0;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:.85rem;
  background:rgba(197,164,126,0.16);
  border:1px solid rgba(197,164,126,0.35);
  color:var(--text-main);
}

.treatments-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:0;
  margin:0;
}

.treatments-list li{
  padding:12px 12px;
  border-radius:16px;
  background:rgba(255,255,255,0.4);
  border:1px solid rgba(0,0,0,0.05);
}

.item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
}

.item .name{
  font-weight:600;
  color:var(--text-main);
}

.item .price{
  font-weight:700;
  color:var(--accent);
  white-space:nowrap;
}

.treatments-list small{
  display:block;
  margin-top:6px;
  color:var(--text-light);
  line-height:1.6;
}

.treatments-cta{
  margin-top:34px;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:26px 24px;
  border-radius:28px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(0,0,0,0.06);
  backdrop-filter:blur(16px);
}

/* =========================
   TREATMENT MENU (HOME)
========================= */

#treatments{
  position: relative;
}

/* ---------- Header ---------- */

.treatments-header{
  max-width: 900px;
  margin: 0 auto 80px;
  text-align: left;
}

.treatments-kicker{
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 18px;
}

.treatments-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  margin-bottom: 28px;
}

.treatments-lead{
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-light);
  max-width: 820px;
}

/* ---------- Grid ---------- */

.treatments-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

/* ---------- Card ---------- */

.treatments-card{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 28px;
  padding: 28px 26px;
  backdrop-filter: blur(16px);
  transition:
    transform .45s cubic-bezier(.175,.885,.32,1.275),
    box-shadow .45s ease;
}

.treatments-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.08);
}

/* ---------- Card Header ---------- */

.treatments-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.treatments-card h3{
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  margin: 0;
}

/* ---------- Pill ---------- */

.pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  background: rgba(197,164,126,0.16);
  border: 1px solid rgba(197,164,126,0.35);
  color: var(--text-main);
  white-space: nowrap;
}

/* ---------- List ---------- */

.treatments-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
}

.treatments-list li{
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 18px;
  padding: 14px 14px;
}

/* Row: name + price */

.item{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.item .name{
  font-weight: 600;
  color: var(--text-main);
}

.item .price{
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* Small description */

.treatments-list small{
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* ---------- CTA ---------- */

.treatments-cta{
  margin-top: 60px;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 28px 26px;
  border-radius: 28px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(16px);
}

.treatments-cta h4{
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  margin: 0 0 6px;
}

.treatments-cta p{
  margin: 0;
  color: var(--text-light);
  line-height: 1.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px){
  .treatments-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .treatments-cta{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   TREATMENTS HEADER = IGUAL A SERVICIOS
========================= */

/* solo centramos el encabezado, no el grid */
#treatments .treatments-header{
  text-align: center;
  max-width: 900px;
  margin: 0 auto 80px;
}

/* kicker centrado */
#treatments .treatments-kicker{
  display: block;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.8rem;
  color: var(--accent);
  margin: 0 auto 14px;
}

/* título centrado */
#treatments .treatments-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  line-height: 1.05;
  margin: 0 auto 22px;
  max-width: 900px;
}

/* párrafo centrado + ancho controlado */
#treatments .treatments-lead{
  margin: 0 auto;
  max-width: 900px;
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--text-light);
}

/* =========================
   TREATMENTS – MOBILE FIX
========================= */
@media (max-width: 640px){

  /* Evita overflow horizontal general */
  #treatments{
    overflow-x: hidden;
  }

  /* Header */
  #treatments .treatments-header{
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 60px;
  }

  #treatments .treatments-title{
    font-size: 2.2rem;      /* más compacto */
    line-height: 1.15;
    word-break: break-word;
  }

  #treatments .treatments-lead{
    font-size: 1rem;
    line-height: 1.8;
    max-width: 100%;
  }

  /* Grid siempre a una columna */
  .treatments-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Card */
  .treatments-card{
    padding: 22px 18px;     /* reduce padding lateral */
  }

  /* Header dentro de la card */
  .treatments-card-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .treatments-card h3{
    font-size: 1.3rem;
  }

  /* Pill no rompe línea */
  .pill{
    align-self: flex-start;
    font-size: 0.8rem;
    padding: 6px 12px;
  }

  /* Items: nombre y precio */
  .item{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .item .price{
    font-size: 0.95rem;
  }

  /* CTA */
  .treatments-cta{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 18px;
  }

  .treatments-cta h4{
    font-size: 1.25rem;
  }

  .treatments-cta p{
    font-size: 0.95rem;
  }
}

/* =========================
   TESTIMONIOS (HORIZONTAL)
========================= */

.testimonials{
  padding-top: 40px;
}

#treatments .item{
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.testimonials-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* Card */
.testimonial-card{
  display: flex;
  gap: 18px;
  padding: 28px 26px;
  border-radius: 28px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(16px);
  transition:
    transform .45s cubic-bezier(.175,.885,.32,1.275),
    box-shadow .45s ease;
}

.testimonial-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.08);
}

/* Foto */
.testimonial-photo{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(197,164,126,0.5);
}

.testimonial-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto */
.testimonial-content p{
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 10px;
  color: var(--text-main);
}

.testimonial-content span{
  font-weight: 600;
  color: var(--accent);
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 980px){
  .testimonials-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   TESTIMONIOS
========================= */

.testimonials-header{
  text-align: center;
  margin-bottom: 60px;
}

.testimonials-kicker{
  display: block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 14px;
}

.testimonials-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 3rem);
  margin: 0;
}


/* =========================
   FOOTER
========================= */
footer{
  background:#1a1a1a;
  color:#fff;
  padding:80px 8% 40px;
  border-radius:60px 60px 0 0;
}

.footer-content{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:50px;
}

.footer-col h4{
  margin-bottom:25px;
  color:var(--accent);
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:50px;
  padding-top:20px;
  text-align:center;
  font-size:0.8rem;
  opacity:0.6;
}

/* FOOTER BRAND */
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.footer-logo{
  width:auto;
  height:70px;
  object-fit:contain;
  opacity:0.95;
}

/* Texto del footer */
.footer-col p{
  color:rgba(255,255,255,0.75);
  line-height:1.7;
}

/* =========================
   FOOTER – AJUSTES MOBILE
========================= */

@media (max-width: 640px){

  footer{
    text-align: center;
  }

  .footer-content{
    gap: 36px;
  }

  .footer-col{
    text-align: center;
  }

  .footer-brand{
    align-items: center;
  }

  /* 🔥 TITULOS MÁS GRANDES EN MÓVIL */
  .footer-col h4{
    margin-bottom: 16px;
    font-size: 1.15rem;   /* antes ~1rem */
  }

  /* 🔥 TEXTO GENERAL MÁS LEGIBLE */
  .footer-col p{
    font-size: 1rem;      /* sube el body */
    line-height: 1.8;
  }

  /* 🔥 COPYRIGHT UN POCO MÁS GRANDE */
  .footer-bottom{
    text-align: center;
    font-size: 0.9rem;
  }


  footer .footer-logo{
    height: 90px;
    width: auto;
  }
}


.footer-logo{
  width: auto;
  height: 70px;
  object-fit: contain;
  opacity: 0.95;

  /* Tinte dorado elegante */
  filter:
    brightness(0)
    saturate(100%)
    invert(68%)
    sepia(24%)
    saturate(450%)
    hue-rotate(350deg)
    brightness(95%)
    contrast(90%);
}

/* =========================
   REVEAL ANIMATION
========================= */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:1.2s all ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .services-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .treatments-grid{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
  .hero-image{
    background-position:center;
    padding-top:120px;
  }
  .hero-image .hero-content{ max-width:100%; }
}

@media (max-width: 720px){
  .treatments-cta{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .navbar{
    top:12px;
    padding:14px 16px;
    border-radius:22px;
  }

  .brand-logo{
    height:40px;
  }

  .contact-info{
    gap:12px;
  }

  .contact-info .phone{ display:none; }

  .hero{
    padding:0 7%;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .hero-buttons a{
    width:100%;
    text-align:center;
  }

  .section-title{ font-size:2.2rem; }

  footer{
    border-radius:36px 36px 0 0;
  }

  .services-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .footer-logo{
    height:50px;
  }
}


/* ===========================
   FIX FINAL FINAL (MÓVIL)
   - nombre centrado
   - una sola rayita (la .price real)
   - mismas alturas
=========================== */
@media (max-width: 640px){

  /* misma altura en todas las tarjetitas */
  #treatments .treatments-card .treatments-list > li{
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* forzar el layout del bloque arriba (name + price) */
  #treatments .treatments-card .treatments-list > li .item{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* <- aquí está el fix real */
    text-align: center !important;
    gap: 8px !important;
  }

  /* nombre centrado */
  #treatments .treatments-card .treatments-list > li .item .name{
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }

  /* rayita / precio centrado (usa SOLO la real del HTML) */
  #treatments .treatments-card .treatments-list > li .item .price{
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }

  /* descripción centrada */
  #treatments .treatments-card .treatments-list > li small{
    text-align: center !important;
    margin-top: 10px !important;
  }

  /* matar cualquier rayita duplicada creada por CSS anterior */
  #treatments .treatments-card .treatments-list > li .item::before,
  #treatments .treatments-card .treatments-list > li .item::after{
    content: none !important;
    display: none !important;
  }
}


/* ===========================
   FIX CTA (MÓVIL) – CENTRADO REAL
=========================== */
@media (max-width: 640px){

  /* el card CTA completo centrado */
  #treatments .treatments-cta{
    flex-direction: column !important;
    align-items: center !important;        /* pisa flex-start */
    justify-content: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  /* bloque de texto centrado y sin recortes */
  #treatments .treatments-cta > div{
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #treatments .treatments-cta h4,
  #treatments .treatments-cta p{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 36ch !important;           /* para que no quede demasiado ancho */
    overflow-wrap: anywhere !important;    /* evita “cortes” */
  }

  /* botón centrado y con ancho bonito */
  #treatments .treatments-cta a.btn-primary{
    display: inline-flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
}


@media (max-width: 640px){
  #treatments.container{
    padding-left: 6% !important;
    padding-right: 6% !important;
  }
}

/* ===========================
   FIX HEADERS CARD (MÓVIL)
   Centrar h3 + pill en treatments-card-head
=========================== */
@media (max-width: 640px){

  #treatments .treatments-card-head{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  #treatments .treatments-card-head h3{
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }

  #treatments .treatments-card-head .pill{
    align-self: center !important;
    margin: 0 auto !important;
  }
}


/* ===========================
   FIX TRUST CHIPS (MÓVIL)
   Centrar "Resultados visibles" y "Tecnología avanzada"
=========================== */
@media (max-width: 640px){

  .trust{
    justify-content: center !important;  /* centra horizontal */
    align-items: center !important;
    text-align: center;
  }

  .trust span{
    margin: 0 auto;                      /* cada chip centrado */
  }
}


/* ===========================
   AJUSTE ESPACIADO – MENÚ TRATAMIENTOS (MÓVIL)
=========================== */
@media (max-width: 640px){

  /* reduce padding vertical del contenedor */
  #treatments.container{
    padding-top: 10px !important;   /* antes 100px */
  }

  /* reduce espacio debajo del header */
  #treatments .treatments-header{
    margin-bottom: 10px !important; /* antes 80px */
  }

  /* reduce espacio entre kicker y título */
  #treatments .treatments-kicker{
    margin-bottom: 10px !important;
  }

  /* reduce espacio entre título y texto */
  #treatments .treatments-title{
    margin-bottom: 16px !important;
  }
}


/* =========================
   NAVBAR – REFINO TAMAÑO
   Menos alto / menos tosco
========================= */

/* Desktop + general */
.navbar{
  padding: 14px 32px;          /* antes 20px 40px */
  border-radius: 60px;         /* antes 100px */
  max-width: 1200px;           /* controla ancho en pantallas grandes */
}

/* Logo un pelín más pequeño */
.brand-logo{
  height: 56px;                /* antes 65px */
}

/* Botón Agendar más fino */
.btn-nav{
  padding: 8px 20px;           /* antes 10px 22px */
  font-size: 0.88rem;
}



/* =========================
   HERO TRUST CHIPS – MOBILE FIX
========================= */
@media (max-width: 640px){

  /* contenedor */
  .hero .trust{
    flex-direction: column;     /* uno debajo del otro */
    align-items: center;
    gap: 10px;                  /* menos espacio */
    margin-top: 14px;
  }

  /* cada chip */
  .hero .trust span{
    width: auto;                /* no full width */
    padding: 10px 16px;         /* más finos */
    font-size: 0.9rem;          /* un pelín más pequeño */
    line-height: 1.2;
    border-radius: 999px;
    text-align: center;
  }
}


/* =========================
   FIX TRUST CHIPS (MÓVIL) - FORZADO
   Resultados visibles / Tecnología avanzada
========================= */
@media (max-width: 640px){

  /* Contenedor */
  header.hero.hero-image .hero-content .trust{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  /* Chips */
  header.hero.hero-image .hero-content .trust span{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: min(320px, 100%) !important;   /* <- no gigantes */
    padding: 10px 14px !important;        /* <- más finos */
    font-size: 0.92rem !important;        /* <- un chin menor */
    line-height: 1.2 !important;

    border-radius: 999px !important;
    text-align: center !important;
  }
}