/* ======================================================================
   Coloración — bloque "Highlights & Balayage"
   Depende de home-nuevo.css (variables de color, .btn-peach y el nav).
   ====================================================================== */

.hb{background:var(--blanco);padding:clamp(2rem,4vw,3.2rem) clamp(1.5rem,4vw,3rem) 0}
.hb__inner{max-width:1180px;margin:0 auto}

/* ---------- migas de pan ---------- */
.hb__migas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;
           font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
           margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.hb__migas a{color:var(--gris);text-decoration:none;transition:color .25s}
.hb__migas a:hover{color:var(--oro)}
.hb__migas span{color:var(--gris);opacity:.45}
.hb__migas em{font-style:normal;color:var(--oro)}

/* ---------- tarjeta de portada ---------- */
.hb__portada{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/6.6;
             min-height:280px;background:#2a2320}
.hb__portada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                 object-position:center 32%;display:block}
/* velo oscuro: sin el, el titulo blanco no se lee sobre el pelo claro */
.hb__portada::after{content:"";position:absolute;inset:0;background:rgba(26,22,20,.42)}
.hb__portada-txt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
                 align-items:center;justify-content:center;text-align:center;padding:1.5rem}

.hb__rotulo{display:flex;align-items:center;justify-content:center;gap:1rem;
            color:var(--oro-claro);font-size:.72rem;font-weight:400;letter-spacing:.32em;
            text-transform:uppercase}
.hb__ln{width:clamp(28px,5vw,64px);height:1px;background:currentColor;opacity:.75;flex:none}
.hb__titulo{font-family:'Cormorant Garamond',serif;font-weight:600;color:#fff;
            font-size:clamp(1.9rem,1rem + 3.2vw,4rem);line-height:1.05;letter-spacing:.02em;
            text-transform:uppercase;margin-top:.9rem}
.hb__rombo{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1rem}
.hb__rombo span{width:clamp(34px,6vw,86px);height:1px;background:var(--oro-claro);opacity:.75}
.hb__rombo i{color:var(--oro-claro);font-style:normal;font-size:.6rem}

/* ---------- lema ---------- */
/* misma tipografia que el titulo ".serv-title" de la home (Cormorant 600,
   tinta intensa, sin cursiva) pero en tamano mediano */
.hb__lema{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--tinta);
          font-size:clamp(1.5rem,1rem + 1.4vw,2.4rem);line-height:1.2;letter-spacing:.005em;
          text-align:center;max-width:1100px;margin:clamp(1.5rem,3vw,2.4rem) auto 0;
          padding:0 clamp(1.5rem,3vw,3.5rem)}
.hb__linea{width:72px;height:1px;background:var(--oro);opacity:.6;
           margin:clamp(1.8rem,3vw,2.6rem) auto clamp(2.5rem,5vw,4rem)}

/* ---------- filas alternas ---------- */
.hb-filas{background:#F7F4EF;padding:clamp(3rem,6vw,5.5rem) clamp(1.5rem,4vw,3rem)}
.hb-fila{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
         gap:clamp(2rem,5vw,5rem);align-items:center}
.hb-fila + .hb-fila{margin-top:clamp(3rem,6vw,5.5rem)}
/* la segunda fila invierte el orden: texto a la izquierda, foto a la derecha */
.hb-fila--inv .hb-fila__img{order:2}

.hb-fila__img{border-radius:14px;overflow:hidden;aspect-ratio:4/3;position:relative}
.hb-fila__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
                  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.hb-fila:hover .hb-fila__img img{transform:scale(1.03)}

.hb-fila__ln{display:block;width:52px;height:1px;background:var(--oro);opacity:.8;margin-bottom:1.3rem}
.hb-fila__txt h3{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--tinta);
                 font-size:clamp(1.6rem,1.1rem + 1.4vw,2.4rem);line-height:1.1;
                 letter-spacing:.03em;text-transform:uppercase}
.hb-fila__txt p{color:var(--gris);font-weight:300;line-height:1.75;margin-top:1.1rem;
                font-size:clamp(.95rem,.92rem + .18vw,1.05rem);max-width:34ch}

/* ---------- lista de ventajas ---------- */
.hb-lista{list-style:none;margin-top:clamp(1.6rem,3vw,2.2rem);padding:0}
.hb-lista li{display:flex;align-items:center;gap:.75rem;color:var(--gris);
             font-weight:300;font-size:.88rem;line-height:1.5}
.hb-lista li + li{margin-top:.75rem}
.hb-ico{flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--oro);
        display:flex;align-items:center;justify-content:center;
        color:var(--oro);font-size:.42rem;font-style:normal}

/* ---------- cierre ---------- */
.hb-cta{background:#FBF8F3;text-align:center;position:relative;overflow:hidden;
        padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,4vw,3rem)}
.hb-cta__titulo{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
                color:var(--tinta);line-height:1.15;margin:1.5rem 0 clamp(1.8rem,3.5vw,2.6rem);
                font-size:clamp(1.7rem,1.1rem + 2vw,2.9rem)}
/* divisor con rombo entre el titulo y el boton */
.hb-cta__rombo{margin:0 auto clamp(1.6rem,3vw,2.4rem)}
.hb-cta__rombo span{background:var(--oro)}
.hb-cta__rombo i{color:var(--oro)}
/* boton con flecha */
.hb-cta__btn{gap:.7rem;padding-inline-end:1.9rem}
.btn-flecha{width:18px;height:18px;flex:none}
/* rama de hojas decorativa */
.hb-cta__hojas{position:absolute;inset-inline-end:clamp(-1rem,-1rem + 2vw,2rem);top:50%;transform:translateY(-50%);
               width:clamp(120px,16vw,240px);color:var(--oro);opacity:.55;pointer-events:none}
.hb-cta__hojas svg{width:100%;height:auto;display:block}
@media(max-width:720px){.hb-cta__hojas{opacity:.28;width:110px}}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .hb-fila{grid-template-columns:1fr;gap:1.8rem}
  .hb-fila--inv .hb-fila__img{order:0}
  .hb-fila__txt p{max-width:none}
  .hb__portada{aspect-ratio:4/3}
}
@media(max-width:520px){
  .hb__migas{font-size:.64rem;letter-spacing:.14em;gap:.4rem}
  .hb-cta__flor{opacity:.18}
}

/* ---------- Nuestras Tecnicas — tarjetas oscuras ---------- */
.nt{background:var(--crema);padding:clamp(3.5rem,6vw,6rem) clamp(1.5rem,4vw,3.2rem)}
.nt__head{text-align:center;margin-bottom:clamp(2.4rem,5vw,3.8rem)}
.nt__rombo{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.1rem}
.nt__rombo span{width:clamp(40px,7vw,90px);height:1px;background:var(--oro);opacity:.75}
.nt__rombo i{color:var(--oro);font-style:normal;font-size:.8rem}
.nt__title{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--tinta);
           font-size:clamp(2.4rem,1.4rem + 3vw,4rem);line-height:1.02}

.nt__sub{margin-top:.9rem;color:var(--tinta);opacity:.6;font-weight:300;
         font-size:clamp(.85rem,.8rem + .2vw,1rem);line-height:1.55;
         max-width:34rem;margin-inline:auto}

.nt__grid{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);
          gap:clamp(1.6rem,2.8vw,2.6rem)}
.nt__card{position:relative;display:grid;grid-template-columns:45% 55%;
          background:#15100E;border-radius:14px;overflow:hidden;min-height:264px;
          box-shadow:0 20px 34px -24px rgba(20,16,14,.7)}
.nt__card--inv{grid-template-columns:55% 45%}
.nt__card--inv .nt__foto{order:2}

.nt__foto{position:relative}
.nt__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.nt__cuerpo{display:flex;flex-direction:column;justify-content:center;
            padding:clamp(1.6rem,2.6vw,2.8rem)}
.nt__name{display:flex;align-items:center;gap:.6rem;
          font-family:'Cormorant Garamond',serif;font-weight:600;color:#F6F1E9;
          font-size:clamp(1.7rem,1.3rem + 1.1vw,2.35rem);line-height:1.1}
.nt__star{color:var(--oro);font-style:normal;font-size:1.2rem}
.nt__ln{display:block;width:34px;height:1px;background:var(--oro);opacity:.7;
        margin:.75rem 0 .9rem}
.nt__desc{color:rgba(246,241,233,.72);font-weight:300;line-height:1.6;
          font-size:clamp(.88rem,.82rem + .2vw,1.05rem)}
.nt__mas{margin-top:1.25rem;color:#E6A0B4;text-decoration:none;font-family:'Jost',sans-serif;
         font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
         transition:color .25s}
.nt__mas span{display:inline-block;transition:transform .25s}
.nt__mas:hover{color:#F0BECB}
.nt__mas:hover span{transform:translateX(4px)}

@media(max-width:900px){.nt__grid{grid-template-columns:1fr;max-width:640px}}
@media(max-width:520px){
  .nt__card,.nt__card--inv{grid-template-columns:1fr;min-height:0}
  .nt__card--inv .nt__foto{order:0}
  .nt__foto{aspect-ratio:16/10}
}

/* ---------- Hair Coloring Experience ---------- */
.hce{background:var(--crema);padding:clamp(3.5rem,6vw,6rem) clamp(1.5rem,4vw,3.2rem)}
.hce__inner{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:1.02fr 1.15fr;
            gap:clamp(2.2rem,4.5vw,5rem);align-items:stretch}
.hce__foto{position:relative;border-radius:20px;overflow:hidden;min-height:480px}
.hce__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.hce__info{display:flex;flex-direction:column;justify-content:center;padding:clamp(.5rem,1vw,1rem) 0}
.hce__rombo{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.hce__rombo span{width:clamp(40px,6vw,86px);height:1px;background:var(--oro);opacity:.75}
.hce__rombo i{color:var(--oro);font-style:normal;font-size:.9rem}
.hce__kicker{color:var(--oro);font-family:'Jost',sans-serif;font-size:.72rem;font-weight:500;
             letter-spacing:.3em;text-transform:uppercase;margin-bottom:1rem}
.hce__title{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--tinta);
            text-transform:uppercase;letter-spacing:.02em;line-height:1.04;
            font-size:clamp(2.2rem,1.3rem + 2.8vw,4rem)}
.hce__parr{color:var(--gris);font-weight:300;line-height:1.7;margin-top:1.2rem;
           font-size:clamp(.92rem,.88rem + .2vw,1.05rem)}

.hce__feats{list-style:none;margin:clamp(1.8rem,3vw,2.6rem) 0 0;padding:0;
            display:grid;grid-template-columns:repeat(3,1fr)}
.hce__feats li{padding:0 clamp(.9rem,1.6vw,1.6rem)}
.hce__feats li:first-child{padding-inline-start:0}
.hce__feats li + li{border-inline-start:1px solid rgba(201,150,46,.35)}
.hce__ico{display:block;color:var(--oro);margin-bottom:.9rem}
.hce__ico svg{width:44px;height:auto;display:block}
.hce__feats h3{font-family:'Jost',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.08em;
               text-transform:uppercase;color:var(--tinta);line-height:1.35}
.hce__feats p{color:var(--gris);font-weight:300;font-size:.8rem;line-height:1.5;margin-top:.55rem}

.hce__servhead{margin-top:clamp(2rem,3.4vw,2.8rem);padding-top:clamp(1.6rem,2.6vw,2.2rem);
               border-top:1px solid rgba(201,150,46,.35);
               color:var(--oro);font-family:'Jost',sans-serif;font-size:.74rem;font-weight:500;
               letter-spacing:.26em;text-transform:uppercase;text-align:center}
.hce__servs{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;justify-content:space-between;
            gap:clamp(.6rem,1.4vw,1.2rem);flex-wrap:wrap}
.hce__servs li{flex:1 1 0;min-width:84px;text-align:center}
.hce__circ{display:block;width:clamp(72px,7.6vw,110px);aspect-ratio:1/1;border-radius:50%;
           overflow:hidden;margin:0 auto}
.hce__circ img{width:100%;height:100%;object-fit:cover;display:block}
.hce__servlbl{display:block;margin-top:.8rem;font-family:'Jost',sans-serif;font-size:.62rem;
              font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);line-height:1.4}

.hce__btn{margin-top:clamp(1.8rem,3vw,2.4rem);display:flex;align-items:center;justify-content:center;
          gap:.8rem;background:#15100E;color:#F6F1E9;text-decoration:none;
          font-family:'Jost',sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.22em;
          text-transform:uppercase;padding:1.05rem 1.4rem;border-radius:6px;transition:background .3s}
.hce__btn:hover{background:#2A211D}

@media(max-width:960px){
  .hce__inner{grid-template-columns:1fr}
  .hce__foto{min-height:0;aspect-ratio:4/3}
}
@media(max-width:560px){
  .hce__feats{grid-template-columns:1fr;gap:1.4rem}
  .hce__feats li{padding:0;border-inline-start:none!important}
  .hce__servs{justify-content:center}
  .hce__servs li{flex:0 0 40%}
}

/* ---------- Resultados de Color — galeria ---------- */
.rg{background:#fff;padding:clamp(3.5rem,6vw,6rem) clamp(1.5rem,4vw,3.2rem)}
.rg__head{text-align:center;margin-bottom:clamp(2.4rem,5vw,3.8rem)}
.rg__title{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--tinta);
           font-size:clamp(2.4rem,1.4rem + 3vw,4rem);line-height:1.02}
.rg__sub{margin-top:.7rem;color:var(--tinta);opacity:.55;font-family:'Jost',sans-serif;
         font-size:clamp(.6rem,.56rem + .2vw,.78rem);font-weight:500;
         letter-spacing:.18em;text-transform:uppercase}
.rg__linea{width:64px;height:1px;background:var(--oro);opacity:.6;margin:1.2rem auto 0}

.rg__grid{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
          gap:clamp(1.8rem,3vw,2.8rem)}
.rg__card{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3/4;margin:0;
          box-shadow:0 20px 34px -26px rgba(20,16,14,.55)}
.rg__card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.rg__card:hover img{transform:scale(1.05)}

/* efecto de entrada: solo se activa con JS (.rg-anim), en cascada por tarjeta */
.rg-anim .rg__card{opacity:0;transform:translateY(26px);
                   transition:opacity .7s ease var(--rg-d,0s),transform .7s ease var(--rg-d,0s)}
.rg-anim .rg__card.rg--visible{opacity:1;transform:none}
.rg-anim .rg__card.rg--visible img{transition:transform .7s ease}

.rg__chip{position:absolute;inset-inline-start:.8rem;bottom:.8rem;display:flex;align-items:center;gap:.45rem;
          background:rgba(255,255,255,.94);border-radius:8px;padding:.4rem .7rem;
          font-family:'Jost',sans-serif;font-size:.6rem;font-weight:600;
          letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);
          box-shadow:0 6px 14px -8px rgba(20,16,14,.4)}
.rg__chip i{color:var(--oro);font-style:normal;font-size:.7rem;line-height:1}

@media(max-width:760px){.rg__grid{grid-template-columns:repeat(2,1fr);max-width:520px}}
@media(max-width:460px){.rg__grid{grid-template-columns:1fr;max-width:320px}}
@media(prefers-reduced-motion:reduce){
  .rg-anim .rg__card{opacity:1;transform:none;transition:none}
}

/* ======================================================================
   AÑADIDOS AL INTEGRARLO EN LA WEB (11/09/2026)
   Piezas que la página necesita y su maqueta no traía, hechas con las suyas:
   sus variables, Cormorant + Jost, rótulo con líneas, rombo y líneas en oro.
   ====================================================================== */

/* h1 solo para buscadores y lectores de pantalla: la cabecera es un vídeo sin texto */
.col-h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
        clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* párrafo de la página anterior bajo el lema */
.hb__intro{max-width:46rem;margin:clamp(1.2rem,2.4vw,1.8rem) auto 0;padding:0 clamp(1rem,3vw,2rem);
           text-align:center;color:var(--gris);font-weight:300;line-height:1.75;
           font-size:clamp(.92rem,.88rem + .2vw,1.05rem)}

/* rótulo de la llamada en oro (en su maqueta iba con un style en línea) */
.hb-cta__rotulo{color:var(--oro)}

/* Fashion Shades: séptima tarjeta, a lo ancho de la rejilla */
.nt__card--ancho{grid-column:1/-1;grid-template-columns:32% 68%}
@media(max-width:900px){.nt__card--ancho{grid-template-columns:45% 55%}}
@media(max-width:520px){.nt__card--ancho{grid-template-columns:1fr}}

/* «Conoce más» despliega dentro de la tarjeta la descripción larga */
.nt__det{margin-top:1.25rem}
.nt__det > .nt__mas{margin-top:0;display:inline-block;list-style:none;cursor:pointer}
.nt__det > .nt__mas::-webkit-details-marker{display:none}
.nt__det[open] > .nt__mas span{transform:rotate(90deg)}
.nt__largo{margin-top:1rem;color:rgba(246,241,233,.72);font-weight:300;line-height:1.7;
           font-size:clamp(.84rem,.8rem + .15vw,.95rem)}
.nt__precio{display:inline-block;margin-top:1rem;padding-bottom:.2rem;color:var(--oro-claro);
            border-bottom:1px solid currentColor;text-decoration:none;font-family:'Jost',sans-serif;
            font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:color .25s}
.nt__precio:hover{color:#F0BECB}

/* los dos párrafos de la página anterior (gama de color y Wella), un punto más discretos */
.hce__parr--mas{margin-top:.9rem;font-size:clamp(.88rem,.85rem + .15vw,.98rem)}

/* ---------- cierre: por qué elegirnos, reseñas, WhatsApp, dirección y horario ---------- */
.cc{background:#FBF8F3;text-align:center;padding:clamp(3.5rem,7vw,6rem) clamp(1.5rem,4vw,3rem)}
.cc__inner{max-width:1100px;margin:0 auto}
.cc__rotulo{color:var(--oro)}
.cc__titulo{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;color:var(--tinta);
            line-height:1.15;margin-top:1.5rem;font-size:clamp(1.7rem,1.1rem + 2vw,2.9rem)}
.cc__rombo{margin:clamp(1.4rem,3vw,2rem) auto clamp(2.2rem,4vw,3rem)}
.cc__rombo span{background:var(--oro)}
.cc__rombo i{color:var(--oro)}
.cc__porque{color:var(--oro);font-family:'Jost',sans-serif;font-size:.74rem;font-weight:500;
            letter-spacing:.26em;text-transform:uppercase}
.cc__razones{list-style:none;padding:0;margin:clamp(1.4rem,3vw,2rem) 0 0;
             display:grid;grid-template-columns:repeat(4,1fr)}
.cc__razones li{padding:0 clamp(.9rem,1.6vw,1.6rem)}
.cc__razones li + li{border-inline-start:1px solid rgba(201,150,46,.35)}
.cc__razones h4{font-family:'Jost',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.08em;
                text-transform:uppercase;color:var(--tinta);line-height:1.35}
.cc__razones p{color:var(--gris);font-weight:300;font-size:.85rem;line-height:1.6;margin-top:.55rem}
.cc__resenas{margin-top:clamp(2.2rem,4vw,3rem);color:var(--gris);font-weight:300;line-height:1.7}
/* el texto trae un <strong class="text-white"> de la llamada oscura anterior: aquí el fondo es crema */
.cc__resenas strong{color:var(--tinta);font-weight:600}
.cc__acciones{margin-top:clamp(1.6rem,3vw,2.2rem);display:flex;flex-wrap:wrap;justify-content:center;
              align-items:center;gap:1rem 1.8rem}
.cc__wa{color:var(--tinta);text-decoration:none;font-family:'Jost',sans-serif;font-size:.72rem;
        font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding-bottom:.2rem;
        border-bottom:1px solid var(--oro);transition:color .25s}
.cc__wa:hover{color:var(--oro)}
.cc__wa span{letter-spacing:.04em}
.cc__datos{margin-top:clamp(1.6rem,3vw,2.2rem);color:var(--gris);font-size:.8rem;font-weight:300;
           letter-spacing:.04em;line-height:1.7}
@media(max-width:960px){
  .cc__razones{grid-template-columns:repeat(2,1fr);row-gap:1.8rem}
  .cc__razones li:nth-child(3){border-inline-start:none}
}
@media(max-width:560px){
  .cc__razones{grid-template-columns:1fr;gap:1.4rem}
  .cc__razones li{padding:0;border-inline-start:none!important}
}

/* ---------- árabe (dir=rtl) ----------
   El espaciado entre letras rompe la escritura ligada y la cursiva no existe
   en árabe; las flechas apuntan hacia el sentido de lectura. */
[dir=rtl] :is(.hb,.hb-filas,.hb-cta,.nt,.rg,.hce,.cc) *{letter-spacing:0}
[dir=rtl] .hb-cta__titulo,[dir=rtl] .cc__titulo{font-style:normal}
[dir=rtl] .btn-flecha{transform:scaleX(-1)}
[dir=rtl] .nt__mas span{transform:scaleX(-1)}
[dir=rtl] .nt__mas:hover span{transform:translateX(-4px) scaleX(-1)}
[dir=rtl] .nt__det[open] > .nt__mas span{transform:rotate(90deg)}