/* =========================================================
   ESTÉTICA MONTSE MARTÍN — Landing page
   Sistema de diseño
   --------------------------------------------------------
   Color
     --crema       #FAF6F0  fondo principal
     --crema-2     #F1E9DF  fondo alterno / secciones
     --tinta       #362B25  texto principal
     --tinta-suave #6E6058  texto secundario
     --terracota   #B97C63  acento principal (cálido, cercano piel)
     --salvia      #7C8A6E  acento secundario (natural / bienestar)
     --oro         #C6A567  líneas y detalles finos
   Tipografía
     Display: 'Fraunces'  (serif editorial, con carácter)
     Cuerpo:  'Work Sans'  (sans neutra, muy legible)
     Utilitaria: 'Work Sans' mayúsculas + tracking, para etiquetas
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  --crema:#FAF6F0;
  --crema-2:#F1E9DF;
  --tinta:#362B25;
  --tinta-suave:#6E6058;
  --terracota:#B97C63;
  --terracota-suave:#D9B6A6;
  --salvia:#7C8A6E;
  --oro:#C6A567;
  --blanco:#FFFFFF;
  --sombra: 0 20px 50px -25px rgba(54,43,37,.35);
  --radio: 2px;
  --max: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
  color:var(--tinta);
  letter-spacing:.01em;
}
.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terracota); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--terracota);
}
.section{ padding:104px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(30px,4vw,44px); line-height:1.15; }
.section-head p{ color:var(--tinta-suave); margin-top:16px; font-size:17px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::before{ display:none; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  font-family:'Work Sans', sans-serif;
  font-size:13.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--radio);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--terracota); color:var(--blanco); }
.btn-primary:hover{ background:#a3654e; }
.btn-outline{ border-color:currentColor; color:var(--tinta); background:transparent; }
.btn-outline:hover{ background:var(--tinta); color:var(--crema); }
.btn-light{ border-color:rgba(255,255,255,.65); color:#fff; }
.btn-light:hover{ background:#fff; color:var(--tinta); }

/* divisor firma: rama botánica lineal */
.divider{ display:flex; justify-content:center; margin:0; opacity:.8; }
.divider svg{ width:120px; height:28px; }

/* ---------- Header ---------- */
.topbar{
  background:var(--tinta); color:#E9DFD3; font-size:12.5px;
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:8px 32px; flex-wrap:wrap; gap:6px; }
.topbar a{ color:#E9DFD3; }
.topbar-info{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar-info span{ display:inline-flex; align-items:center; gap:7px; }
.topbar-social{ display:flex; gap:14px; }
.topbar-social a{ opacity:.85; display:inline-flex; align-items:center; } .topbar-social a:hover{ opacity:1; color:var(--oro); }

header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,240,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(54,43,37,.08);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; }
.logo{ font-family:'Fraunces', serif; font-size:23px; letter-spacing:.02em; }
.logo strong{ color:var(--terracota); font-weight:600; }
.nav-links{ display:flex; gap:38px; align-items:center; font-size:14px; font-weight:500; }
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--terracota); transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; gap:14px; align-items:center; }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.burger span{ display:block; width:24px; height:2px; background:var(--tinta); margin:5px 0; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:center;
  color:#fff;
  overflow:hidden;
}
.hero img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 25%;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(46,36,30,.72) 0%, rgba(46,36,30,.42) 48%, rgba(46,36,30,.18) 100%);
}
.hero-content{ position:relative; z-index:2; max-width:620px; padding:0 32px; }
.hero-content .eyebrow{ color:var(--oro); }
.hero-content .eyebrow::before{ background:var(--oro); }
.hero-content h1{
  font-size:clamp(40px,6vw,66px); line-height:1.06; color:#fff;
  font-weight:500;
}
.hero-content h1 em{ font-style:italic; color:var(--terracota-suave); }
.hero-content p{ margin-top:22px; font-size:18px; color:#EFE7DC; max-width:480px; }
.hero-actions{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-quote{
  position:absolute; right:6%; bottom:8%; z-index:2; max-width:280px;
  font-family:'Fraunces', serif; font-style:italic; font-size:15px; color:#EFE7DC;
  border-left:1px solid var(--oro); padding-left:16px; display:none;
}
@media(min-width:1000px){ .hero-quote{ display:block; } }

/* ---------- Categorías (pills) ---------- */
.cats{ background:var(--crema-2); padding:26px 0; }
.cats .wrap{ display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; }
.cats .wrap::-webkit-scrollbar{ display:none; }
.cat-pill{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:11px 20px; background:var(--blanco); border:1px solid rgba(54,43,37,.1);
  border-radius:40px; font-size:13px; font-weight:500; letter-spacing:.02em;
  transition:all .2s ease;
}
.cat-pill:hover{ border-color:var(--terracota); color:var(--terracota); }
.cat-pill img{ width:24px; height:24px; border-radius:50%; object-fit:cover; }
.cat-ico{
  width:24px; height:24px; border-radius:50%; background:var(--crema-2);
  display:flex; align-items:center; justify-content:center; color:var(--terracota); flex:0 0 auto;
}
.cat-ico svg{ width:14px; height:14px; }
.cat-pill:hover .cat-ico{ background:var(--terracota); color:#fff; }

/* ---------- Servicios ---------- */
.services-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.grid-services{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px;
}
.card-service{
  position:relative; border-radius:var(--radio); overflow:hidden;
  aspect-ratio:3/4; background:var(--tinta);
}
.card-service img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card-service:hover img{ transform:scale(1.06); }
.card-service::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(35,27,23,.92) 0%, rgba(35,27,23,.15) 55%, rgba(35,27,23,0) 75%);
}
.card-service .inner{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px;
  color:#fff;
}
.card-service .num{ font-family:'Fraunces', serif; font-style:italic; color:var(--terracota-suave); font-size:14px; }
.card-service h3{ color:#fff; font-size:22px; margin-top:6px; }
.card-service p{ color:#E7DCCF; font-size:14px; margin:10px 0 14px; max-width:38ch; }
.card-service .go{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--oro);
}
.card-service .go svg{ width:14px; height:14px; transition:transform .25s ease; }
.card-service:hover .go svg{ transform:translateX(4px); }

/* ---------- Sobre Montse ---------- */
.about{ background:var(--crema-2); }
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.about-photo{ position:relative; }
.about-photo img{ border-radius:var(--radio); box-shadow:var(--sombra); }
.about-photo .frame{
  position:absolute; top:22px; left:-22px; right:22px; bottom:-22px;
  border:1px solid var(--oro); z-index:-1;
}
.about-text .signature{ font-family:'Fraunces', serif; font-style:italic; font-size:20px; color:var(--terracota); margin-top:28px; }
.about-list{ margin-top:30px; display:grid; gap:16px; }
.about-list li{ display:flex; gap:14px; font-size:15px; color:var(--tinta-suave); }
.about-list li svg{ flex:0 0 auto; width:18px; height:18px; color:var(--terracota); margin-top:2px; }
.brands{ margin-top:52px; display:flex; flex-wrap:wrap; gap:36px; align-items:center; opacity:.75; }

/* ---------- Galería ---------- */
.gallery{ }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:130px;
  gap:14px;
}
.gallery-grid a{ position:relative; overflow:hidden; border-radius:var(--radio); grid-column:span 2; grid-row:span 2; }
.gallery-grid a.wide{ grid-column:span 4; }
.gallery-grid a.tall{ grid-row:span 3; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-grid a:hover img{ transform:scale(1.08); }
.gallery-grid a::after{
  content:""; position:absolute; inset:0; background:rgba(185,124,99,0); transition:background .25s ease;
}
.gallery-grid a:hover::after{ background:rgba(185,124,99,.15); }

/* ---------- Promo / CTA banda ---------- */
.promo{
  position:relative; padding:96px 0; text-align:center; color:#fff; overflow:hidden;
}
.promo img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.promo::after{ content:""; position:absolute; inset:0; background:rgba(45,35,29,.72); }
.promo .content{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
.promo h2{ color:#fff; font-size:clamp(28px,4vw,42px); }
.promo p{ color:#EFE7DC; margin-top:16px; font-size:16.5px; }
.promo .btn{ margin-top:30px; }

/* ---------- Cómo trabajamos ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.step{ position:relative; padding-top:8px; }
.step .n{ font-family:'Fraunces', serif; font-style:italic; font-size:56px; color:var(--terracota-suave); line-height:1; }
.step h4{ font-size:19px; margin-top:10px; }
.step p{ color:var(--tinta-suave); margin-top:8px; font-size:15px; }

/* ---------- Contacto ---------- */
.contact{ background:var(--tinta); color:#EDE4D8; }
.contact .section-head h2{ color:#fff; }
.contact .section-head p{ color:#C9BCAE; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.contact-info{ display:grid; gap:26px; align-content:start; }
.contact-info .item{ display:flex; gap:16px; }
.contact-info .item .ico{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--oro);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--oro);
}
.contact-info .item h4{ color:#fff; font-size:15.5px; margin-bottom:2px; }
.contact-info .item p, .contact-info .item a{ color:#C9BCAE; font-size:14.5px; }
.contact-social{ display:flex; gap:14px; margin-top:6px; }
.contact-social a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:.2s; color:#EDE4D8;
}
.contact-social a:hover{ background:var(--terracota); border-color:var(--terracota); }

.form{ display:grid; gap:16px; }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#C9BCAE; margin-bottom:7px; display:block; }
.form input, .form select, .form textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:13px 14px; border-radius:var(--radio); font-family:inherit; font-size:14.5px;
}
.form input::placeholder, .form textarea::placeholder{ color:#8A7E72; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--terracota); }
.form textarea{ resize:vertical; min-height:120px; }
.form .consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#C9BCAE; }
.form .consent input{ width:auto; margin-top:3px; }
.form .consent a{ color:var(--oro); text-decoration:underline; }
#form-status{ font-size:14px; padding:12px 14px; border-radius:var(--radio); display:none; }
#form-status.ok{ display:block; background:rgba(124,138,110,.18); border:1px solid var(--salvia); color:#D8E0CE; }
#form-status.err{ display:block; background:rgba(185,90,63,.18); border:1px solid #B95A3F; color:#F0CFC2; }

/* ---------- Mapa ---------- */
.map-wrap{ line-height:0; filter:grayscale(.25) contrast(1.05); }
.map-wrap iframe{ width:100%; height:420px; border:0; }

/* ---------- Footer ---------- */
footer{ background:#241C18; color:#B9AC9E; padding:64px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; }
.footer-grid h4{ color:#EDE4D8; font-size:14px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin-bottom:18px; font-family:'Work Sans',sans-serif; }
.footer-logo{ font-family:'Fraunces', serif; font-size:24px; color:#fff; }
.footer-logo strong{ color:var(--terracota); }
.footer-grid p{ font-size:14px; margin-top:14px; max-width:32ch; }
.footer-links{ display:grid; gap:10px; }
.footer-links a{ font-size:14px; transition:.2s; } .footer-links a:hover{ color:var(--oro); }
.footer-bottom{
  margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#8A7E72;
}
.footer-bottom a{ color:#8A7E72; } .footer-bottom a:hover{ color:var(--oro); }

/* ---------- Botón flotante WhatsApp / reservas ---------- */
.float-cta{
  position:fixed; right:22px; bottom:22px; z-index:60;
  background:var(--terracota); color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sombra);
  transition:.2s;
}
.float-cta:hover{ background:#a3654e; transform:translateY(-2px); }

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:44px; }
  .grid-services{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; gap:34px; }
  .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:110px; }
  .gallery-grid a.wide{ grid-column:span 4; }
}
@media(max-width:760px){
  .nav-links, .nav-cta .btn-outline{ display:none; }
  .burger{ display:block; }
  .topbar-info span:nth-child(3){ display:none; }
  .section{ padding:70px 0; }
  .grid-services{ grid-template-columns:1fr; }
  .form .row2{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid a.wide{ grid-column:span 2; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-content{ padding-top:40px; }
}
@media(max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .topbar .wrap{ justify-content:center; text-align:center; }
}

/* menu móvil */
.mobile-menu{
  position:fixed; inset:0; background:var(--crema); z-index:100;
  display:flex; flex-direction:column; padding:26px 28px;
  transform:translateX(100%); transition:transform .3s ease;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu .close{ align-self:flex-end; background:none; border:0; font-size:28px; cursor:pointer; }
.mobile-menu nav{ display:grid; gap:26px; margin-top:40px; font-family:'Fraunces', serif; font-size:26px; }
.mobile-menu .actions{ margin-top:auto; display:grid; gap:14px; }