/* ======================================================================
   Pestañas — réplica del diseño "Nuestros tratamientos de pestañas"
   Autocontenida en variables --ps-*.

   11/09/2026, al integrarlo en la web: las propiedades con lado (los
   `border-left` de la banda de valores) pasan a lógicas para que el árabe
   (dir=rtl) salga bien, y al final van las piezas que la página ya tenía y su
   maqueta no traía, más el bloque de árabe.
   ====================================================================== */
:root{
  --ps-oro:#C9962E; --ps-terra:#C97B54; --ps-tinta:#262019; --ps-gris:#55493F;
  --ps-fondo:#F8F3EC; --ps-carta:#FCF8F2; --ps-borde:#E8DCCB; --ps-negro:#1C1713;
}

/* ---------- hero ---------- */
.ps-hero{background:var(--ps-fondo);padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,4vw,3.2rem)}
.ps-hero__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;
                gap:clamp(2rem,4vw,4rem);align-items:center}
.ps-hero__kicker{color:var(--ps-terra);font-family:'Jost',sans-serif;font-size:.82rem;
                 font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.ps-hero__titulo{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ps-tinta);
                 font-size:clamp(3rem,2.2rem + 3.4vw,5rem);line-height:1;
                 text-transform:uppercase;letter-spacing:.03em;margin-top:.7rem}
.ps-hero__adorno{display:flex;align-items:center;gap:.8rem;color:var(--ps-oro);margin:1.1rem 0 1.2rem}
.ps-hero__adorno i{font-style:normal;font-size:.95rem}
.ps-hero__adorno span{width:56px;height:1px;background:var(--ps-terra);opacity:.7}
.ps-hero__parr{color:var(--ps-gris);font-weight:300;line-height:1.7;
               font-size:clamp(.95rem,.9rem + .2vw,1.08rem);max-width:38ch}

.ps-btn{display:inline-flex;align-items:center;gap:.9rem;background:var(--ps-negro);color:#F6F1E9;
        text-decoration:none;border-radius:6px;padding:.95rem 1.8rem;margin-top:1.8rem;
        font-family:'Jost',sans-serif;font-size:.66rem;font-weight:500;
        letter-spacing:.22em;text-transform:uppercase;transition:background .3s}
.ps-btn:hover{background:#33291F}
.ps-btn svg{width:15px;height:15px;flex:none}

.ps-hero__fotos{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto auto;
                gap:clamp(.7rem,1.2vw,1rem)}
.ps-hero__fotos img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;
                    border:6px solid #fff;box-shadow:0 10px 26px -20px rgba(30,22,16,.5)}
.ps-hero__fotos .ps-f1{grid-row:1/3;aspect-ratio:267/294}
.ps-hero__fotos .ps-f2{aspect-ratio:182/135}
.ps-hero__fotos .ps-f3{aspect-ratio:182/140}

/* ---------- divisor + titulo ---------- */
.ps-div{background:var(--ps-fondo);padding:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,4vw,3.2rem) 0;
        display:flex;align-items:center;gap:1rem;color:var(--ps-oro)}
.ps-div span{flex:1;height:1px;background:#DECDB8}
.ps-div i{font-style:normal;font-size:.9rem}
.ps-titulo{background:var(--ps-fondo);text-align:center;
           padding:clamp(1.6rem,3vw,2.4rem) 1.5rem clamp(1.8rem,3vw,2.6rem)}
.ps-titulo h2{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ps-tinta);
              font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);letter-spacing:.08em;text-transform:uppercase}
.ps-titulo::after{content:"";display:block;width:64px;height:2px;background:var(--ps-oro);
                  opacity:.75;margin:.9rem auto 0}

/* ---------- tarjetas de tratamientos ---------- */
.ps-cards{background:var(--ps-fondo);padding:0 clamp(1.5rem,4vw,3.2rem) clamp(2rem,3.5vw,3rem)}
.ps-cards__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);
                gap:clamp(1.4rem,2.6vw,2.2rem)}
.ps-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,2.2vw,2rem);align-items:center;
         background:var(--ps-carta);border:1px solid var(--ps-borde);border-radius:12px;
         padding:clamp(1.2rem,2vw,1.8rem)}
.ps-card img{width:clamp(140px,15vw,190px);aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block}
.ps-card h3{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ps-tinta);
            font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);letter-spacing:.06em;text-transform:uppercase}
.ps-card h3::after{content:"";display:block;width:34px;height:2px;background:var(--ps-terra);
                   opacity:.8;margin-top:.55rem}
.ps-card p{color:var(--ps-gris);font-weight:300;font-size:.9rem;line-height:1.6;margin-top:.8rem;max-width:30ch}
.ps-card__mas{display:inline-block;margin-top:.9rem;color:var(--ps-terra);text-decoration:none;
              font-family:'Jost',sans-serif;font-size:.86rem;font-weight:400;transition:color .25s}
.ps-card__mas span{display:inline-block;transition:transform .25s}
.ps-card__mas:hover{color:#B0603C}
.ps-card__mas:hover span{transform:translateX(4px)}

/* ---------- experiencia ---------- */
.ps-exp{background:var(--ps-fondo);padding:0 clamp(1.5rem,4vw,3.2rem) clamp(2.5rem,4vw,3.5rem)}
.ps-exp__caja{max-width:1180px;margin:0 auto;background:var(--ps-carta);border:1px solid var(--ps-borde);
              border-radius:12px;padding:clamp(1.2rem,2vw,1.8rem);
              display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}
.ps-exp__img{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10}
.ps-exp__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                 object-position:center 42%;display:block}
.ps-exp__kicker{color:var(--ps-terra);font-family:'Jost',sans-serif;font-size:.78rem;
                font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.ps-exp__titulo{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ps-tinta);
                font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);letter-spacing:.05em;
                text-transform:uppercase;margin-top:.4rem}
.ps-exp__titulo::after{content:"";display:block;width:44px;height:2px;background:var(--ps-oro);
                       opacity:.75;margin-top:.7rem}
.ps-exp__parr{color:var(--ps-gris);font-weight:300;font-size:.92rem;line-height:1.7;
              margin-top:1rem;max-width:52ch}
.ps-exp__acciones{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.4rem}
.ps-exp__acciones .ps-btn{margin-top:0}
.ps-btn--borde{display:inline-flex;align-items:center;background:transparent;color:var(--ps-tinta);
               border:1px solid #B9A488;border-radius:6px;padding:.95rem 1.6rem;
               text-decoration:none;font-family:'Jost',sans-serif;font-size:.66rem;font-weight:500;
               letter-spacing:.2em;text-transform:uppercase;transition:background .3s}
.ps-btn--borde:hover{background:#fff}

/* ---------- banda de valores ---------- */
.ps-band{background:var(--ps-fondo);padding:0 clamp(1.5rem,4vw,3.2rem) clamp(3rem,5vw,4.5rem)}
.ps-band__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.ps-band__item{text-align:center;padding:0 clamp(.8rem,2vw,2rem)}
.ps-band__item + .ps-band__item{border-inline-start:1px solid #E4D6C3}
.ps-band__ico{color:var(--ps-oro)}
.ps-band__ico svg{width:44px;height:44px;display:block;margin:0 auto 1rem}
.ps-band__item h3{font-family:'Jost',sans-serif;font-size:.74rem;font-weight:600;
                  letter-spacing:.12em;text-transform:uppercase;color:var(--ps-tinta)}
.ps-band__item p{color:var(--ps-gris);font-weight:300;font-size:.84rem;line-height:1.55;
                 margin:.55rem auto 0;max-width:22ch}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .ps-hero__inner{grid-template-columns:1fr}
  .ps-cards__grid{grid-template-columns:1fr}
  .ps-exp__caja{grid-template-columns:1fr}
  .ps-band__grid{grid-template-columns:repeat(2,1fr);row-gap:1.8rem}
  .ps-band__item:nth-child(3){border-inline-start:none}
}
@media(max-width:560px){
  .ps-card{grid-template-columns:1fr}
  .ps-card img{width:100%;aspect-ratio:16/10}
  .ps-band__grid{grid-template-columns:1fr}
  .ps-band__item{border-inline-start:none!important}
}

/* ======================================================================
   AÑADIDOS AL INTEGRARLO EN LA WEB (11/09/2026)
   Lo que la página ya contaba y su maqueta no traía (secciones y servicios de
   `pestañas.json`, galería, «Por qué elegirnos» y el cierre), hecho con sus
   mismas piezas: caja crema con borde, antetítulo terracota, título Cormorant
   en mayúsculas con la raya de oro y su botón oscuro.
   ====================================================================== */
:root{--ps-peach:#E4AE9B; --ps-peach-hover:#D9997F; --ps-crema:#F6F1E9}

/* cabecera: reservar + WhatsApp, en fila como en su bloque de experiencia */
.ps-hero__acciones{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:1.8rem}
.ps-hero__acciones .ps-btn{margin-top:0}

/* fotos en cuadrado (la de la sesión es vertical y la de estilos, cuadrada) */
.ps-exp__img--cuadrada{aspect-ratio:1/1}
.ps-exp__img--cuadrada img{object-position:center}
/* caja con la foto a la otra mano, para alternar */
.ps-exp__caja--inv{grid-template-columns:1.25fr 1fr}
.ps-exp__caja--inv .ps-exp__img{order:2}

/* ---------- servicios: las cinco técnicas en detalle ---------- */
.ps-det{background:var(--ps-fondo);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.5rem,4vw,3.2rem) clamp(2.5rem,4vw,3.5rem)}
.ps-det__inner{max-width:1180px;margin:0 auto}
.ps-det__cab{text-align:center;max-width:68ch;margin:0 auto}
.ps-det__titulo{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ps-tinta);
                font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);letter-spacing:.05em;
                text-transform:uppercase;margin-top:.4rem}
.ps-det__titulo::after{content:"";display:block;width:44px;height:2px;background:var(--ps-oro);
                       opacity:.75;margin:.7rem auto 0}
.ps-det__parr{color:var(--ps-gris);font-weight:300;font-size:.95rem;line-height:1.75;margin-top:1rem}
.ps-det__sub{text-align:center;margin-top:clamp(2rem,3.5vw,2.8rem);color:var(--ps-terra);
             font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
             font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem)}
.ps-det__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,2vw,1.6rem);
              margin-top:clamp(1.2rem,2vw,1.6rem)}
.ps-det__item{flex:1 1 min(100%,300px);max-width:372px;background:var(--ps-carta);
              border:1px solid var(--ps-borde);border-radius:12px;padding:clamp(1.2rem,2vw,1.6rem)}
.ps-det__item h3{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ps-tinta);
                 font-size:clamp(1.1rem,1rem + .5vw,1.35rem);letter-spacing:.05em;text-transform:uppercase}
.ps-det__item h3::after{content:"";display:block;width:34px;height:2px;background:var(--ps-terra);
                        opacity:.8;margin-top:.55rem}
.ps-det__item p{color:var(--ps-gris);font-weight:300;font-size:.88rem;line-height:1.6;margin-top:.8rem}
.ps-det__item .ps-det__precio{color:var(--ps-terra);font-weight:500}

/* ---------- galería: nuestros trabajos ---------- */
.ps-gal{background:var(--ps-fondo);padding:0 clamp(1.5rem,4vw,3.2rem) clamp(2.5rem,4vw,3.5rem);
        scroll-margin-top:6rem}
.ps-titulo .ps-exp__kicker{margin-bottom:.45rem}
.ps-gal__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
              gap:clamp(.7rem,1.2vw,1rem)}
.ps-gal__grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:10px;
                  border:6px solid #fff;box-shadow:0 10px 26px -20px rgba(30,22,16,.5)}

/* ---------- por qué elegirnos: franja oscura, con su negro ---------- */
.ps-porque{background:var(--ps-negro);padding:clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,3.2rem)}
.ps-porque__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;
                  gap:clamp(2rem,4vw,4rem);align-items:center}
.ps-porque__kicker{color:var(--ps-oro);font-family:'Jost',sans-serif;font-size:.78rem;
                   font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.ps-porque__titulo{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ps-crema);
                   font-size:clamp(1.8rem,1.4rem + 1.6vw,2.8rem);letter-spacing:.05em;
                   text-transform:uppercase;margin-top:.4rem}
.ps-porque__titulo::after{content:"";display:block;width:44px;height:2px;background:var(--ps-oro);
                          opacity:.75;margin-top:.7rem}
.ps-porque__parr{color:rgba(246,241,233,.72);font-weight:300;font-size:.96rem;line-height:1.75;
                 margin-top:1rem;max-width:52ch}
.ps-porque__acciones{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
.ps-porque__acciones .ps-btn{margin-top:0}
.ps-btn--peach{background:var(--ps-peach);color:var(--ps-tinta)}
.ps-btn--peach:hover{background:var(--ps-peach-hover)}
.ps-btn--claro{color:var(--ps-crema);border-color:rgba(246,241,233,.35)}
.ps-btn--claro:hover{background:rgba(246,241,233,.08)}
.ps-porque__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.6vw,1.2rem)}
.ps-porque__dato{border:1px solid rgba(246,241,233,.12);border-radius:12px;
                 background:rgba(246,241,233,.03);padding:clamp(1.1rem,2vw,1.5rem)}
.ps-porque__dato strong{display:block;font-family:'Cormorant Garamond',serif;font-weight:600;
                        color:var(--ps-oro);line-height:1.1}
.ps-porque__cifra{font-size:clamp(2rem,1.7rem + 1vw,2.5rem)}
.ps-porque__nombre{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);letter-spacing:.05em;text-transform:uppercase}
.ps-porque__dato p{color:rgba(246,241,233,.68);font-weight:300;font-size:.86rem;line-height:1.6;margin-top:.6rem}

/* ---------- cierre: reserva o WhatsApp ---------- */
.ps-cta{background:var(--ps-fondo);text-align:center;padding:clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,3.2rem)}
.ps-cta__inner{max-width:720px;margin:0 auto}
.ps-cta .ps-hero__adorno{justify-content:center;margin:0 0 1.2rem}
.ps-cta__titulo{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ps-tinta);
                font-size:clamp(1.8rem,1.4rem + 1.6vw,2.8rem);letter-spacing:.05em;
                text-transform:uppercase;margin-top:.5rem}
.ps-cta__parr{color:var(--ps-gris);font-weight:300;font-size:1rem;line-height:1.7;
              margin:1rem auto 0;max-width:52ch}
.ps-cta__acciones{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem}
.ps-cta__acciones .ps-btn{margin-top:0}

/* ---------- responsive de lo añadido ---------- */
@media(max-width:960px){
  .ps-exp__caja--inv{grid-template-columns:1fr}
  .ps-exp__caja--inv .ps-exp__img{order:0}
  .ps-gal__grid{grid-template-columns:repeat(2,1fr)}
  .ps-porque__inner{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ps-porque__grid{grid-template-columns:1fr}
}

/* ======================================================================
   ÁRABE (dir=rtl)
   El espaciado entre letras separa las letras árabes, que van unidas: fuera
   en toda la página. Y las flechas («→» y la del botón) apuntan hacia donde se
   lee, así que se voltean.
   ====================================================================== */
[dir=rtl] :is(.ps-hero,.ps-titulo,.ps-cards,.ps-exp,.ps-band,.ps-det,.ps-gal,.ps-porque,.ps-cta) *{letter-spacing:0}
[dir=rtl] .ps-btn svg{transform:scaleX(-1)}
[dir=rtl] .ps-card__mas span{transform:scaleX(-1)}
[dir=rtl] .ps-card__mas:hover span{transform:translateX(-4px) scaleX(-1)}