/* ===== VARIABLES ===== */
:root{
  --bg:#faf8f5; --body-color:#333; --accent:#b88a44; --brand-wa:#25D366;
  --card:#fff; --shadow:0 6px 22px rgba(0,0,0,.10); --radius:14px;

  --font-title:'Great Vibes',cursive;
  --font-body:'Poppins',sans-serif;

  /* Oro + borde negro sutil (sin sombras duras) */
  --gold-a:#f6e08a; --gold-b:#e7c45a; --gold-c:#d1a53a; --gold-d:#c18f2f; --gold-e:#f0c675;
  --title-stroke-width:1px;           /* MUY sutil */
  --title-stroke-color:#000;

  /* Tamaños y espaciamiento de títulos */
  --title-letterspace: 1px;           /* Más aire entre letras */
  --subtitle-letterspace: .6px;

  --woman-w:300px; --logo-w:620px; --hero-pad:8.2rem;
  --title-size:56px; --sub-size:22px;

  --container-w:1100px; --block-pad:4rem;

  --gal-h:420px;
  --map-h:340px; --map-h-sm:260px;
}

/* RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--body-color);
  line-height:1.6;
  background: var(--bg) url('../img/fondo.png') center/cover repeat fixed;
}
img{display:block; max-width:100%; height:auto;}
a:focus-visible,button:focus-visible{outline:2px solid #6c63ff; outline-offset:3px; border-radius:10px;}

/* NAVBAR */
.navbar{
  position:sticky; top:0; z-index:1000; padding:.6rem 1rem;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(12px) saturate(120%);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.nav-chip{
  list-style:none; display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
  padding:.35rem .7rem; margin:0 auto;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.07);
  border-radius: 999px;
}
.nav-chip a{
  text-decoration:none; font-weight:600; font-size:16px; color:var(--body-color);
  padding:.38rem .8rem; border-radius:999px; transition: background .2s, color .2s;
}
.nav-chip a:hover{ background: rgba(0,0,0,.06); color: var(--accent); }

/* HERO */
.hero{ padding: var(--hero-pad) 1rem 2.2rem; text-align:center; }
.logo-row{ max-width: var(--container-w); margin:0 auto; display:flex; align-items:center; justify-content:center; gap:1.2rem; }
.woman{ width: var(--woman-w); height:auto; }
.woman-left{ transform: scaleX(-1); }
.logo-title{ width: var(--logo-w); height:auto; display:block; }

/* Título y subtítulo dorados (Great Vibes) */
.hero-headline{
  font-family:var(--font-title);
  font-size: var(--title-size);
  margin: 1.1rem auto .5rem; max-width: 980px;
  letter-spacing: var(--title-letterspace);
}
.hero-sub{
  font-size: var(--sub-size);
  opacity:.92;
  letter-spacing: var(--subtitle-letterspace);
}

/* DORADO (sin sombras duras) */
.gold-title,
.gold-title-sm,
.hero-headline,
#servicios h2,
#resenas h2,
#trabajos h2,
#ubicacion h2,
#sobre h2,
.cards h3,
.xp{
  color: transparent !important;
  background: linear-gradient(180deg,
    var(--gold-a) 0%,
    var(--gold-b) 22%,
    var(--gold-c) 46%,
    var(--gold-d) 70%,
    var(--gold-e) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: var(--title-stroke-width) var(--title-stroke-color);
  text-shadow: none; /* sin sombras para no “ensuciar” el dorado */
}

/* BOTONES HERO */
.hero-actions{ margin: 1.1rem 0 0; display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; }
.btn{
  padding:.76rem 1.3rem; border-radius:999px; text-decoration:none; font-weight:600;
  display:inline-block; transition:.2s; border:1.5px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  color: var(--body-color);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.btn:hover{ background:#fff; }
.btn-acento{ background: var(--brand-wa); color:#fff; border-color:transparent; }
.btn-acento:hover{ filter: brightness(.95); }
.btn-fresha{ background:#6c63ff; color:#fff; border-color:transparent; }
.btn-fresha:hover{ filter: brightness(.96); }

.hero-redes{ margin-top: 1rem; display:flex; justify-content:center; gap:.9rem; }
.hero-redes img{ width:44px; height:44px; transition: transform .2s; }
.hero-redes img:hover{ transform: scale(1.12); }

/* BLOQUES */
.bloque{ padding: var(--block-pad) 1rem; text-align:center; }
.bloque h2{
  font-family: var(--font-title);
  font-size: clamp(28px, 3.2vw, 42px);
  margin-bottom: 1.2rem;
  letter-spacing: var(--title-letterspace);
}
.box{
  max-width: var(--container-w); margin:0 auto; background: rgba(255,255,255,.82);
  border-radius: 18px; padding: 1.4rem 1.2rem; box-shadow: var(--shadow);
}
.xp{ margin-top:.6rem; letter-spacing: .8px; }

/* CARDS */
.cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; max-width: var(--container-w); margin:0 auto; }
.card{ background: rgba(255,255,255,.88); border-radius: var(--radius); padding: 1.4rem; width: 300px; box-shadow: var(--shadow); text-align:left; }
.card h3{
  font-family: var(--font-title);
  margin-bottom:.35rem;
  font-size: 30px;
  letter-spacing: .8px;
}

/* ===== SLIDER (trabajos + reseñas) ===== */
.slider{ position: relative; max-width: var(--container-w); margin:0 auto; padding: 8px; overflow:hidden; border-radius:18px; }
.slider .slides{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  transition: transform .6s ease;
}
.slider .arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,.28); color:#fff; border:none;
  width:34px; height:34px; border-radius:50%;
  font-size:18px; line-height:34px; text-align:center; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.22);
}
.slider .arrow.left{ left:8px; } .slider .arrow.right{ right:8px; }

/* RESEÑAS */
.review-slide{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height: 230px; padding: 1.4rem;
  background: rgba(255,255,255,.90);
  border-radius: 18px; box-shadow: var(--shadow);
}
.review-slide p{ max-width: 760px; }
.stars{ letter-spacing:.2rem; font-size: 22px; margin-bottom:.4rem; color:#e3b341; }
.review-slide .who{ opacity:.75; margin-top:.4rem; }

/* TRABAJOS: cuadrado, sin marcos, sin recorte */
.img-slide{
  width: 100%;
  max-height: var(--gal-h);
  aspect-ratio: 1 / 1;         /* cuadradas */
  object-fit: contain;          /* no recorta */
  background: transparent;      /* sin bandas negras */
  border:none; box-shadow:none; border-radius: 18px;
}

/* MAPA */
.map{ margin: 2rem auto; max-width: var(--container-w); }
.map iframe{ width:100%; height: var(--map-h); border:none; border-radius: 16px; }

/* Botonera mapa */
.btns{ display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-top:1rem; }
.btns .btn{ background: rgba(255,255,255,.8); border: 1px solid rgba(0,0,0,.08); color: var(--body-color); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.btns .btn:hover{ background:#fff; border-color: rgba(0,0,0,.12); }
.btns .btn.btn-acento{ background: var(--brand-wa); color:#fff; border-color:transparent; }
.btns .btn.btn-acento:hover{ filter: brightness(.95); }

/* FLOTANTES */
.fab{
  width:60px; height:60px; border-radius:50%;
  background-position:center; background-repeat:no-repeat; background-size:88%;
  position:fixed; right:20px; z-index:1200;
  box-shadow:0 4px 6px rgba(0,0,0,.25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.fab:hover{ transform:scale(1.12); box-shadow:0 6px 10px rgba(0,0,0,.35); }
.fab-whatsapp{ bottom:20px;  background-image:url("../img/whatsapp-flotante.svg"); }
.fab-call{     bottom:95px;  background-image:url("../img/llamar-flotante.svg"); }
.fab-fresha{   bottom:170px; background-image:url("../img/boton-agenda.svg"); }

/* RESPONSIVE */
@media (max-width: 992px){
  :root{ --title-size:52px; --sub-size:20px; }
  .img-slide{ max-height: 360px; }
}
@media (max-width: 768px){
  :root{ --woman-w:200px; --logo-w:420px; --title-size:46px; --sub-size:18px; }
  .hero{ padding: 6.2rem 1rem 2rem; }
  .hero-redes img{ width:36px; height:36px; }
  .map iframe{ height: var(--map-h-sm); }
  .fab{ width:50px; height:50px; right:15px; background-size:86%; }
  .fab-whatsapp{ bottom:15px; } .fab-call{ bottom:75px; } .fab-fresha{ bottom:135px; }
}
@media (max-width: 600px){
  :root{ --woman-w:150px; --logo-w:320px; --title-size:40px; --sub-size:17px; }
  .img-slide{ max-height: 300px; }
}

/* Reduce animaciones */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto; }
}
/* === TÍTULOS DORADOS “MÁS RELLENOS” (override final) === */

/* Ajustes globales de tamaño/espaciado (puedes subir/bajar si quieres) */
:root{
  --title-size: 66px;    /* H1 (portada) */
  --h2-size: clamp(36px, 3.6vw, 46px);
  --h3-size: 32px;       /* tarjetas/servicios */
  --title-stroke-width: 0.7px;  /* borde negro sutil */
}

/* Paleta oro (usa las que ya tenías si existen) */
:root{
  --gold-a: #f6e08a;
  --gold-b: #e7c45a;
  --gold-c: #d1a53a;
  --gold-d: #c18f2f;
}

/* Mixin de estilo dorado “relleno” */
.gold-title,
.gold-title-sm,
.hero-headline,
.bloque h2,
.card h3 {
  /* fuente y tamaños */
  font-family: 'Great Vibes', cursive !important;
  line-height: 1.06;               /* más compacto pero legible */
  letter-spacing: 0.6px;           /* más espacio entre letras */

  /* tamaños por nivel */
}
.hero-headline { font-size: var(--title-size) !important; }
.bloque h2,
.gold-title    { font-size: var(--h2-size) !important; }
.card h3,
.gold-title-sm { font-size: var(--h3-size) !important; }

/* Relleno dorado con borde negro fino */
.gold-title,
.gold-title-sm,
.hero-headline,
.bloque h2,
.card h3 {
  /* relleno dorado */
  background: linear-gradient(180deg, var(--gold-a) 0%, var(--gold-b) 25%, var(--gold-c) 60%, var(--gold-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* borde negro sutil */
  -webkit-text-stroke: var(--title-stroke-width) #000;

  /* “engorde” del relleno (sin sombra negra): capas doradas muy suaves */
  text-shadow:
    0 0 0.6px var(--gold-b),
    0 0 1.2px var(--gold-b),
    0 0 1.8px var(--gold-b),
    0 -1px 0 rgba(255,255,255,.35); /* pequeño brillo superior */
}

/* Subtítulos (h3) con un poco más de tracking para legibilidad */
.card h3,
.gold-title-sm { letter-spacing: 0.7px; line-height: 1.08; }

/* Si algún título heredó otra fuente por CSS inline, fuerza prioridad */
.gold-title,
.gold-title-sm,
.hero-headline,
.bloque h2,
.card h3 {
  font-weight: 700 !important; /* Great Vibes no tiene pesos, pero ayuda a rematar */
}
/* === TÍTULOS DORADOS “CON MÁS PESO VISUAL” === */

:root{
  --title-size: 70px;       /* H1 portada más grande */
  --h2-size: clamp(40px, 3.8vw, 50px);
  --h3-size: 34px;          /* subtítulos */
  --title-stroke-width: 0.6px; /* borde negro sutil */
}

/* Aplica a títulos principales y subtítulos */
.hero-headline,
.bloque h2,
.card h3,
.gold-title,
.gold-title-sm {
  font-family: 'Great Vibes', cursive !important;
  font-weight: 700 !important; 
  line-height: 1.05;
  letter-spacing: 0.8px;       /* un poco más de aire entre letras */

  /* Relleno dorado intenso */
  background: linear-gradient(180deg,
    #f9e37a 0%,
    #eac859 30%,
    #d5a93b 65%,
    #c28f2f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Borde negro delgadito */
  -webkit-text-stroke: var(--title-stroke-width) #000;

  /* Capas doradas para dar “cuerpo” al relleno */
  text-shadow:
    0 0 1px #eac859,
    0 0 2px #eac859,
    0 0 3px #d5a93b,
    0 0 4px rgba(0,0,0,.15); /* leve profundidad */
}

/* Tamaños específicos */
.hero-headline { font-size: var(--title-size) !important; }
.bloque h2,
.gold-title { font-size: var(--h2-size) !important; }
.card h3,
.gold-title-sm { font-size: var(--h3-size) !important; }
/* === TÍTULOS DORADOS CON SOMBRA DIFUMINADA === */

:root{
  --title-size: 70px;       /* H1 portada grande */
  --h2-size: clamp(40px, 3.8vw, 50px);
  --h3-size: 34px;          /* subtítulos */
}

/* Aplica a títulos principales y subtítulos */
.hero-headline,
.bloque h2,
.card h3,
.gold-title,
.gold-title-sm {
  font-family: 'Great Vibes', cursive !important;
  font-weight: 700 !important; 
  line-height: 1.08;
  letter-spacing: 0.8px;

  /* Relleno dorado */
  background: linear-gradient(180deg,
    #f9e37a 0%,
    #eac859 30%,
    #d5a93b 65%,
    #c28f2f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* SOMBRA DIFUMINADA (sin borde) */
  text-shadow:
    0 2px 6px rgba(0,0,0,.35),  /* profundidad general */
    0 0 6px #eac859,            /* halo dorado */
    0 0 12px #d5a93b;           /* brillo más suave */
}

/* Tamaños específicos */
.hero-headline { font-size: var(--title-size) !important; }
.bloque h2,
.gold-title { font-size: var(--h2-size) !important; }
.card h3,
.gold-title-sm { font-size: var(--h3-size) !important; }
/* === TÍTULOS DORADOS CON SOMBRA HACIA ABAJO === */

:root{
  --title-size: 70px;       /* Título grande portada */
  --h2-size: clamp(40px, 3.8vw, 50px);
  --h3-size: 34px;          /* subtítulos */
}

/* Aplica a títulos principales y subtítulos */
.hero-headline,
.bloque h2,
.card h3,
.gold-title,
.gold-title-sm {
  font-family: 'Great Vibes', cursive !important;
  font-weight: 700 !important;
  line-height: 1.1;
  letter-spacing: 0.8px;

  /* Relleno dorado limpio */
  background: linear-gradient(180deg,
    #f9e37a 0%,
    #eac859 30%,
    #d5a93b 65%,
    #c28f2f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* SOMBRA DIFUMINADA SOLO HACIA ABAJO */
  text-shadow:
    0 4px 8px rgba(0,0,0,.35); /* sombra suave proyectada hacia abajo */
}

/* Tamaños específicos */
.hero-headline { font-size: var(--title-size) !important; }
.bloque h2,
.gold-title { font-size: var(--h2-size) !important; }
.card h3,
.gold-title-sm { font-size: var(--h3-size) !important; }
/* === TÍTULOS DORADOS CON BORDE FINO === */

:root{
  --title-size: 70px;       /* Título grande portada */
  --h2-size: clamp(40px, 3.8vw, 50px);
  --h3-size: 34px;          /* subtítulos */
}

/* Aplica a títulos principales y subtítulos */
.hero-headline,
.bloque h2,
.card h3,
.gold-title,
.gold-title-sm {
  font-family: 'Great Vibes', cursive !important;
  font-weight: 700 !important;
  line-height: 1.1;
  letter-spacing: 0.6px;

  /* Relleno dorado */
  background: linear-gradient(180deg,
    #f9e37a 0%,
    #eac859 30%,
    #d5a93b 65%,
    #c28f2f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Borde negro MUY delgado */
  -webkit-text-stroke: 0.6px #000;
}

/* Tamaños específicos */
.hero-headline { font-size: var(--title-size) !important; }
.bloque h2,
.gold-title { font-size: var(--h2-size) !important; }
.card h3,
.gold-title-sm { font-size: var(--h3-size) !important; }