/*
  BR Nails · integración sobre HTML5 UP Escape Velocity
  Mantiene estructura, tipografía y bordes del template, ajustando solo la gama a rosa pastel.
*/

:root{
  --ink-mute:#717479;
  --ink:#2f333b;
  --line:#dddddd;
  --muted:#919499;
  --gold-deep:#8c3c5a;
  --br-pink:#e977a8;
  --br-pink-soft:#f5a8c8;
  --br-pink-pale:#fde8f0;
  --br-pink-cream:#fff6f9;
  --br-rose-deep:#8c3c5a;
  --br-ink:#2f333b;
  --br-muted:#717479;
}

body, input, textarea, select{
  font-family:'Source Sans Pro', Arial, Helvetica, sans-serif;
}

body.br-public{
  background:#fff6f9;
}

/* Header del template, con foto profesional y overlay suave */
#header{
  background-image:
    linear-gradient(rgba(46, 38, 45, .40), rgba(46, 38, 45, .46)),
    url('../img/editorial/banner-services.jpg');
  background-position:center center;
}
.homepage #header{
  height:38em;
}
#header:before{
  background:url('../template/assets/css/images/overlay.png'), linear-gradient(135deg, rgba(233,119,168,.62), rgba(47,51,59,.72));
}

/* Logo integrado: sin cuadrado blanco, bien respirado */
#logo.br-logo-block{
  top:2.6em;
}
#logo .brand-mark{
  width:138px;
  height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.35em auto;
  text-decoration:none;
}
#logo .brand-mark img{
  max-width:138px;
  max-height:104px;
  object-fit:contain;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.25));
}
#logo h1{
  font-size:2.25em;
  letter-spacing:.28em;
  text-shadow:0 2px 22px rgba(0,0,0,.24);
}
#logo p{
  color:rgba(255,255,255,.78);
}

/* Navegación exactamente en lógica del template, con acabado pastel */
#nav > ul{
  background:rgba(47,51,59,.20);
  backdrop-filter:blur(5px);
}
#nav > ul > li > a,
#nav > ul > li > span{
  color:rgba(255,255,255,.86);
}
#nav > ul > li:hover > a,
#nav > ul > li.current > a{
  color:#fff;
}

/* Paleta del template llevada a rosa pastel */
.wrapper.style1,
.wrapper.style1 .title,
input[type="button"].style1,
input[type="submit"].style1,
input[type="reset"].style1,
button.style1,
.button.style1{
  background-color:var(--br-pink);
}
input[type="button"].style1:hover,
input[type="submit"].style1:hover,
input[type="reset"].style1:hover,
button.style1:hover,
.button.style1:hover{
  background-color:var(--br-pink-soft);
}
input[type="button"].style1:active,
input[type="submit"].style1:active,
input[type="reset"].style1:active,
button.style1:active,
.button.style1:active{
  background-color:#d76596;
}

.wrapper.style3,
.wrapper.style3 .title{
  background-color:#f8eef3;
}
#highlights .highlight h3,
#highlights .highlight h3 a{
  color:var(--br-rose-deep);
}

a:hover{ color:var(--br-pink); }
strong,b{ color:#484d55; }

/* Botones adaptados a acciones reales */
.button.small-button{
  min-width:0;
  height:3.25em;
  line-height:3.25em;
  padding:0 1.45em;
  font-size:.78em;
}
.button.fit,
input.fit{
  width:100%;
}

/* Intro */
#intro p.style2{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}
#intro p.style3{
  color:rgba(255,255,255,.80);
}

/* Imagen destacada: se conserva formato del template, con recorte elegante */
.br-featured-image img{
  height:380px;
  object-fit:cover;
  object-position:center;
}

/* Servicios dentro de feature-list del template */
.br-service-list section{
  min-height:230px;
  padding-bottom:1em;
}
.br-card-meta{
  font-size:1.08em;
  line-height:1.55em;
  color:#777a80;
  margin-bottom:1.4em;
}
.br-card-meta strong{
  color:var(--br-rose-deep);
}
.br-empty-box{
  border:solid 1px #ddd;
  background:#fff;
  color:#777a80;
  border-radius:.35em;
  padding:2em;
  text-align:center;
  margin:0 0 2em 0;
}

/* Highlights/cards */
.br-section-head{
  padding-bottom:4em !important;
}
.br-highlight-card .image.featured img,
#highlights .highlight .image.featured img{
  height:260px;
  object-fit:cover;
}
.br-editorial-row .highlight p{
  min-height:4.5em;
}

/* Galería */
.br-gallery-wrapper header.style1{
  padding-bottom:4em;
}
.br-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.5em;
}
.br-gallery-grid .image.featured{
  margin:0;
}
.br-gallery-grid .image.featured img{
  width:100%;
  height:290px;
  object-fit:cover;
}
.br-gallery-grid .image{
  border:solid 10px #f8eef3;
  background:#fff;
}

/* CTA final */
.br-contact-cta{
  text-align:center;
}
.br-contact-cta p.style1{
  font-size:1.35em;
  letter-spacing:.075em;
}
.br-contact-cta p.style2{
  font-weight:700;
  color:#fff;
  border-radius:.35em;
  box-shadow:inset 0 0 1px 1px rgba(255,255,255,.25);
  font-size:2.45em;
  letter-spacing:.075em;
  line-height:1.35em;
  padding:.8em 1em;
  margin:0 auto 1em auto;
  max-width:780px;
}
.br-contact-cta p.style3{
  font-size:1.05em;
  width:48em;
  max-width:100%;
  margin:0 auto 2em auto;
  color:rgba(255,255,255,.78);
}

/* Footer */
#footer{
  background-color:#2f333b;
}
.br-footer-head{
  padding-bottom:4em !important;
  margin-bottom:4em !important;
}
.footer-logo{
  width:116px;
  max-height:92px;
  object-fit:contain;
  margin:0 auto 1.25em auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.32));
}
.footer-contact-form textarea{
  min-height:11em;
}
#copyright ul{
  list-style:none;
  padding:0;
}

/* WhatsApp flotante */
.wa-float{
  position:fixed;
  right:1.35em;
  bottom:1.35em;
  z-index:10000;
  width:3.7em;
  height:3.7em;
  border-radius:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff !important;
  background:#25D366;
  box-shadow:0 1em 2.25em rgba(0,0,0,.24);
}
.wa-float:hover{ background:#1fb85a; }
.wa-float .icon:before{ font-size:1.45em; margin:0; }

/* Reserva */
.br-booking-page{
  padding-top:7em;
}
.br-booking-title{
  padding-bottom:4em !important;
}
.br-booking-card{
  background:#fff;
  border:solid 1px #ddd;
  border-radius:.35em;
  padding:2.5em;
  box-shadow:0 1.25em 3em rgba(47,51,59,.08);
}
.br-booking-card h3{
  color:#484d55;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1.1em;
  margin-bottom:1.5em;
}
.br-center{
  text-align:center;
}
.br-center p{
  max-width:42em;
  margin-left:auto;
  margin-right:auto;
}
.br-svc-options{
  display:flex;
  flex-direction:column;
  gap:.9em;
}
.br-svc-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  text-decoration:none;
  border:solid 1px #ddd;
  border-radius:.35em;
  padding:1em 1.2em;
  background:#fff;
  color:#606167;
  transition:all .25s ease-in-out;
}
.br-svc-option:hover{
  border-color:var(--br-pink);
  color:#484d55;
  box-shadow:0 .75em 2em rgba(233,119,168,.12);
}
.br-svc-option strong{
  display:block;
  color:#484d55;
}
.br-svc-option em{
  display:block;
  font-style:normal;
  font-size:.85em;
  color:#919499;
}
.br-svc-option b{
  color:var(--br-rose-deep);
  white-space:nowrap;
}
.br-selected-service{
  display:flex;
  align-items:center;
  gap:1.25em;
  border-bottom:solid 1px #ddd;
  margin-bottom:2em;
  padding-bottom:1.75em;
}
.br-selected-service img{
  width:7em;
  height:7em;
  object-fit:cover;
  border-radius:.35em;
  border:solid 8px #f8eef3;
  flex:none;
}
.br-selected-service h3{
  margin:0 0 .25em 0;
}
.br-selected-service p{
  margin:0;
}
.br-mini-button{
  min-width:0;
  height:3em;
  line-height:3em;
  padding:0 1.2em;
  margin-left:auto;
}
.field{
  margin-bottom:1.5em;
}
.field label,
.br-client-data label,
.br-slots-wrap label{
  display:block;
  font-size:.78em;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
  color:#606167;
  margin-bottom:.65em;
}
.input,
select.select,
textarea.textarea{
  width:100%;
}
.hint{
  font-size:.86em;
  color:#919499;
  margin:.45em 0 0 0;
}
.oculto{ display:none !important; }
.br-slots-wrap{
  margin:2em 0;
}
.slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(6.5em, 1fr));
  gap:.75em;
}
.slot{
  background:#fff;
  color:#606167;
  border:solid 1px #ddd;
  border-radius:.35em;
  height:3.35em;
  line-height:3.35em;
  min-width:0;
  padding:0;
  letter-spacing:.08em;
}
.slot:hover{
  border-color:var(--br-pink);
  background:#fff6f9;
}
.slot.selected{
  background:var(--br-pink);
  color:#fff;
  border-color:var(--br-pink);
}
.slot-empty{
  grid-column:1 / -1;
  border:solid 1px #ddd;
  border-radius:.35em;
  padding:1.25em;
  text-align:center;
  color:#919499;
  margin:0;
}
.br-client-data{
  margin-top:2em;
  border-top:solid 1px #ddd;
  padding-top:2em;
}
.confirm-box{
  text-align:center;
}
.confirm-box .check{
  width:5em;
  height:5em;
  border-radius:100%;
  margin:0 auto 1.4em auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8eef3;
  color:var(--br-rose-deep);
}
.confirm-box .check svg{
  width:2.4em;
  height:2.4em;
}
.confirm-detail{
  max-width:32em;
  margin:2em auto 0 auto;
  border:solid 1px #ddd;
  border-radius:.35em;
  overflow:hidden;
  text-align:left;
}
.confirm-detail .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  padding:.85em 1em;
  border-bottom:solid 1px #ddd;
}
.confirm-detail .row:last-child{ border-bottom:0; }
.confirm-detail .k{ color:#919499; }
.confirm-detail .v{ color:#484d55; font-weight:700; }

/* Flash genérico en páginas públicas */
.flash{
  border:solid 1px #ddd;
  border-radius:.35em;
  padding:1em 1.25em;
  margin-bottom:1.25em;
  background:#fff;
}
.flash-error{
  border-color:#e8b6c9;
  background:#fff1f6;
  color:#8c3c5a;
}
.flash-ok{
  border-color:#c9e0cc;
  background:#f2faf3;
  color:#527a55;
}

@media screen and (max-width: 980px){
  .br-gallery-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .br-featured-image img{ height:310px; }
}
@media screen and (max-width: 736px){
  #logo .brand-mark{ width:110px; height:82px; }
  #logo .brand-mark img{ max-width:110px; max-height:82px; }
  #logo h1{ font-size:1.45em; letter-spacing:.2em; }
  #logo p{ font-size:.75em; padding:0 2em; line-height:1.8em; }
  .homepage #header{ height:31em; }
  .br-featured-image img{ height:220px; }
  .br-gallery-grid{ grid-template-columns:1fr; }
  .br-gallery-grid .image.featured img{ height:250px; }
  .br-booking-card{ padding:1.4em; }
  .br-selected-service{ align-items:flex-start; flex-wrap:wrap; }
  .br-mini-button{ margin-left:0; }
  .br-svc-option{ align-items:flex-start; flex-direction:column; }
}

/* Ajustes finales solicitados: logo nuevo, servicio con foto circular y footer limpio */
#logo .brand-mark{
  width:210px;
  height:128px;
  margin-bottom:1.15em;
}
#logo .brand-mark img{
  max-width:210px;
  max-height:128px;
}
#logo h1{
  font-size:2.1em;
  letter-spacing:.20em;
}
#logo p{
  text-transform:uppercase;
  letter-spacing:.26em;
  font-weight:700;
}
.br-service-title{
  display:flex;
  align-items:center;
  gap:1em;
  min-height:3.35em;
  margin:0 0 .85em 0;
  padding-left:0 !important;
  line-height:1.22em;
  color:var(--br-rose-deep);
}
.br-service-title:before{ display:none !important; }
.br-service-name{
  display:inline-block;
  padding-top:.03em;
}
.br-service-badge{
  width:3.35em;
  height:3.35em;
  border-radius:100%;
  overflow:hidden;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#2f333b;
  border:solid 6px #f8eef3;
  box-shadow:0 .7em 1.45em rgba(47,51,59,.10);
}
.br-service-badge.has-photo{
  background:#fff;
}
.br-service-badge img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.br-service-badge .icon{
  position:static;
  left:auto;
  top:auto;
  width:auto;
  height:auto;
  line-height:1;
  color:#fff;
  font-size:1.35em;
}
.br-service-badge .icon:before{
  margin:0;
}
.br-footer-head p{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
}
.footer-logo{
  width:168px;
  max-height:112px;
}
.admin-access-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3em;
  padding:0 1.35em;
  border-radius:.35em;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.86) !important;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  font-size:.76em;
}
.admin-access-link:hover{
  background:var(--br-pink);
  color:#fff !important;
}
@media screen and (max-width:736px){
  #logo .brand-mark{ width:150px; height:96px; }
  #logo .brand-mark img{ max-width:150px; max-height:96px; }
  #logo h1{ font-size:1.25em; letter-spacing:.14em; }
  #logo p{ letter-spacing:.18em; }
}

/* Corrección mobile: servicios centrados sin desfasar foto/icono */
@media screen and (max-width:736px){
  .br-service-list{
    max-width:100%;
  }
  .br-service-list section{
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:center;
    max-width:23em;
    margin-left:auto;
    margin-right:auto;
  }
  .br-service-title{
    justify-content:center;
    text-align:left;
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  .br-service-list p,
  .br-service-list .br-card-meta{
    text-align:center;
  }
  .br-service-list .button.small-button{
    display:block;
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }
}


/* v8 · Servicios con estética de cursos + colores coherentes */
.br-service-card-row{
  row-gap:2em;
}
.br-service-card{
  height:100%;
}
.br-service-card .image.featured img,
.br-service-card .image.featured{
  width:100%;
}
.br-service-card .image.featured img{
  height:260px;
  object-fit:cover;
  object-position:center;
}
.br-service-card h3,
.br-service-card h3 a,
.br-service-card h3 a:visited,
#main .br-service-card h3,
#main .br-service-card h3 a{
  color:var(--br-rose-deep) !important;
}
#footer .feature-list h3,
#footer .feature-list h3 a{
  color:var(--br-rose-deep) !important;
}
#footer .feature-list h3:before{
  background-color:var(--br-rose-deep);
}
@media screen and (max-width: 980px){
  .br-service-card .image.featured img{
    height:280px;
  }
}
@media screen and (max-width: 736px){
  .br-service-card{
    text-align:center;
  }
  .br-service-card .image.featured{
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  .br-service-card .image.featured img{
    height:240px;
  }
  .br-service-card .actions{
    justify-content:center;
  }
  .br-service-card .button{
    width:100%;
    max-width:24em;
  }
}

/* v9 · Ajustes finales solicitados */
#logo.br-logo-block{
  top:2.15em;
}
#logo .brand-mark{
  width:270px;
  height:220px;
  margin-bottom:.55em;
}
#logo .brand-mark img{
  max-width:270px;
  max-height:220px;
}
#logo h1{
  display:none !important;
}
#logo p.br-hero-subtitle,
#logo p{
  margin-top:0;
  color:rgba(255,255,255,.88);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-weight:700;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}

#footer .feature-list h3,
#footer .feature-list h3 a,
#footer .feature-list h3 a:visited{
  color:#fff !important;
}

.br-course-card-row,
.br-service-card-row{
  align-items:stretch !important;
  row-gap:2.4em;
}
.br-course-card-row > [class*="col-"],
.br-service-card-row > [class*="col-"]{
  display:flex;
}
.br-course-card-row .highlight,
.br-service-card-row .highlight,
.br-highlight-card,
.br-service-card{
  width:100%;
  display:flex;
  flex-direction:column;
}
.br-course-card-row .highlight > p:not(.br-card-meta),
.br-service-card-row .highlight > p:not(.br-card-meta){
  min-height:5.8em;
}
.br-course-card-row .br-card-meta,
.br-service-card-row .br-card-meta{
  margin-top:.25em;
}
.br-course-card-row .actions,
.br-service-card-row .actions{
  margin-top:auto;
  justify-content:center;
}
.br-course-card-row .image.featured,
.br-service-card-row .image.featured{
  width:100%;
}
@media screen and (max-width:980px){
  #logo .brand-mark{
    width:230px;
    height:190px;
  }
  #logo .brand-mark img{
    max-width:230px;
    max-height:190px;
  }
  .br-course-card-row .highlight > p:not(.br-card-meta),
  .br-service-card-row .highlight > p:not(.br-card-meta){
    min-height:auto;
  }
}
@media screen and (max-width:736px){
  #logo .brand-mark{
    width:190px;
    height:160px;
  }
  #logo .brand-mark img{
    max-width:190px;
    max-height:160px;
  }
  #logo p.br-hero-subtitle,
  #logo p{
    font-size:.82em;
    letter-spacing:.20em;
    padding:0 1em;
  }
  .br-course-card-row > [class*="col-"],
  .br-service-card-row > [class*="col-"]{
    display:block;
  }
}


/* v10 · Ajustes finos solicitados */
.br-card-meta{
  font-size:1.08em !important;
  line-height:1.55em;
}
.br-card-meta strong{
  font-size:1.04em;
}
.br-selected-service p{
  font-size:1.06em;
}
form input[type="tel"]{
  -moz-transition:all .25s ease-in-out;
  -webkit-transition:all .25s ease-in-out;
  -ms-transition:all .25s ease-in-out;
  transition:all .25s ease-in-out;
  -webkit-appearance:none;
  display:block;
  border:0;
  background:#eee;
  box-shadow:inset 0 0 1px 0 #a0a1a7;
  border-radius:.35em;
  width:100%;
  padding:.75em 1em;
}
form input[type="tel"]:focus{ background:#f8f8f8; }

/* v32 · Reserva web: correo obligatorio para historial/fidelidad */
.br-email-login-note{
  margin-top:-.35em;
  margin-bottom:1.25em;
  border-left:solid 4px var(--br-pink);
  padding:.7em 1em;
  background:#fff6fa;
  border-radius:.35em;
}

/* v33 · Identificación Google en reservas */
.br-google-card,
.br-google-identity{
  border:solid 1px #ead9e1;
  background:#fff8fb;
  border-radius:.55em;
  padding:1.35em;
  margin:1.35em 0;
}
.br-google-card h3{
  margin:0 0 .45em;
  color:#8c3c5a;
}
.br-google-card p{
  margin:0 0 1em;
}
.br-google-btn{
  width:100%;
  text-align:center;
}
.br-google-identity{
  display:flex;
  align-items:center;
  gap:1em;
}
.br-google-identity img{
  width:3.3em;
  height:3.3em;
  border-radius:100%;
  object-fit:cover;
  flex:none;
}
.br-google-identity strong,
.br-google-identity span{
  display:block;
}
.br-google-identity span{
  color:#777a80;
  font-size:.95em;
}
.br-google-identity a{
  margin-left:auto;
  white-space:nowrap;
  font-weight:700;
  font-size:.9em;
}
@media screen and (max-width:640px){
  .br-google-identity{
    align-items:flex-start;
    flex-direction:column;
  }
  .br-google-identity a{ margin-left:0; }
}