/*
Theme Name: Selah
Theme URI:
Author: Mauricio Sanhueza (Plasmable)
Version: 1.0
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --cream:#E6DAC8;--porcelain:#F4F1EA;--feather:#FAF9F6;
  --ink:#1A1410;--mid:#6B5D57;--muted:#9A8D87;--line:#D5C9BC;
  --sage:#63675C;
  --madera:#866b4e;
  --madera-dark:#6e5640;
  --r:12px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--feather);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden}
a{color:inherit}

header{

  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 4rem;
  background:rgba(250,249,246,.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .4s
}
#check{
  display: none;
}
.check-btn{
  position: fixed;
  right: 10px;
  top: 40px;
  overflow: hidden;
  height: 50px;
  width: 50px;
  background: var(--main-color-call-to-action);
  cursor: pointer;
  z-index: 1010;
  transition: .5s;
  visibility: hidden;
  background: var(--madera);
}

.check-btn .line-check{
  position: absolute;
  width: 35px;
  height: 2px;
  background: #fff;
  z-index: 102;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: .5s;
  transform-origin: left top;
  transition-timing-function: cubic-bezier(.29, 1.01, 0.5, 2);
}
.check-btn .line-check:nth-child(2){
   top: 65%;
}
.check-btn .line-check:nth-child(3){
   top: 35%;
}
#check:checked  ~ nav .menu{
    right: 0%; 
    height: 100vh;
 }

#check:checked  ~ .check-btn .line-check:nth-child(1){
  left: -100%;

}
#check:checked  ~ .check-btn .line-check:nth-child(2){
   top: 50%;
    transform:rotate(45deg) translate(-50%,-50%);
}
#check:checked  ~ .check-btn .line-check:nth-child(3){
  top: 50%;
  transform:rotate(-45deg) translate(-50%,-50%);
}
/* ── NAV ── */

.menu.s{border-color:var(--line)}
.menu {display:flex;gap:2.5rem;list-style:none; flex-direction:row;}
.logo img{width:200px;height:62px;object-fit:contain;display:block}
.nav-links{display:flex;gap:2.5rem;list-style:none; flex-direction:row;}
.menu  a{font-size:.72rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
.menu  a:hover{color:var(--ink)}
#menu-item-93:hover .sub-menu{display: block;}
.sub-menu{position: absolute; display: none; background: var(--porcelain);}
.sub-menu li{ list-style: none; padding: .5em; }
.nav-cta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--madera);padding:.65rem 1.5rem;text-decoration:none;border-radius:999px;transition:background .2s}
.nav-cta:hover{background:var(--madera-dark)}

/* ── BTNS ── */
.btn-dark{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--madera);padding:.9rem 2rem;text-decoration:none;border-radius:999px;transition:background .2s;display:inline-block}
.btn-dark:hover{background:var(--madera-dark)}
.btn-txt{font-size:.82rem;color:var(--mid);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.btn-txt:hover{color:var(--ink);border-color:var(--ink)}

/* ── HERO ── */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden; width: 100%;}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-overlay{position:absolute;inset:0;background:rgba(250,249,246,.52)}
.hero-overlay-left{position:absolute;inset:0;background:linear-gradient(to right,rgba(250,249,246,.85) 42%,rgba(250,249,246,0) 75%)}
.hero-content{position:relative;z-index:1;padding:10rem 4rem 6rem;max-width:600px}
.hero-eye{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin-bottom:1.75rem;display:block;opacity:0;animation:up .9s .1s cubic-bezier(.22,1,.36,1) forwards}
h1{font-family:var(--serif);font-size:clamp(3rem,5.5vw,5.5rem);font-weight:300;line-height:1.08;opacity:0;animation:up .9s .25s cubic-bezier(.22,1,.36,1) forwards}
h1 em{font-style:italic;color:var(--mid)}
.hero-div{width:3rem;height:1px;background:var(--cream);margin:2.2rem 0;opacity:0;animation:up .9s .4s cubic-bezier(.22,1,.36,1) forwards}
.hero-sub{font-size:1rem;color:var(--mid);max-width:38ch;line-height:1.8;opacity:0;animation:up .9s .5s cubic-bezier(.22,1,.36,1) forwards}
.hero-btns{display:flex;align-items:center;gap:2rem;margin-top:2.75rem;opacity:0;animation:up .9s .65s cubic-bezier(.22,1,.36,1) forwards}

/* ── STRIP ── */
.strip{background:var(--cream);padding:1.1rem 4rem;display:flex;gap:4rem;overflow:hidden}
.strip-i{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mid);white-space:nowrap;display:flex;align-items:center;gap:.75rem}
.strip-i::before{content:'—';color:var(--muted)}

/* ── FILOSOFIA ── */
.filo{padding:9rem 4rem;display:grid;grid-template-columns:200px 1fr;gap:6rem;align-items:start;border-top:1px solid var(--line)}
.sec-eye{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:.5rem}
.filo-body h2{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:300;line-height:1.22;margin-bottom:1.75rem}
.filo-body h2 em{font-style:italic;color:var(--mid)}
.filo-body p{font-size:1rem;color:var(--mid);max-width:56ch;line-height:1.85;margin-bottom:1rem}
.stats{display:flex;gap:4rem;margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.stat-n{font-family:var(--serif);font-size:2.8rem;font-weight:300;line-height:1}
.stat-l{font-size:.75rem;color:var(--muted);letter-spacing:.05em;margin-top:.4rem}

/* ── SERVICIOS ── */
.servicios{padding:9rem 4rem;background:var(--porcelain)}
.svc-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4.5rem}
.svc-hdr h2{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:300}
.svc-hdr a{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.svc-hdr a:hover{color:var(--ink);border-color:var(--ink)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.svc-img-card{position:relative;overflow:hidden;min-height:360px;cursor:pointer;border-radius:var(--r)}
.svc-img-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.svc-img-card:hover img{transform:scale(1.04)}
.svc-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,20,16,.72) 0%,rgba(26,20,16,.08) 60%)}
.svc-img-content{position:absolute;bottom:0;left:0;right:0;padding:2.5rem}
.svc-img-num{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,249,246,.5);margin-bottom:.75rem}
.svc-img-name{font-family:var(--serif);font-size:2rem;font-weight:400;color:var(--feather);margin-bottom:.5rem}
.svc-img-desc{font-size:.85rem;color:rgba(250,249,246,.7);max-width:30ch;line-height:1.65}
.svc-img-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);text-decoration:none;margin-top:1.25rem;transition:gap .2s}
.svc-img-link:hover{gap:.7rem}
.svc-txt-card{background:var(--porcelain);padding:3rem;display:flex;flex-direction:column;justify-content:space-between;min-height:360px;cursor:pointer;transition:background .3s;position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line)}
.svc-txt-card:hover{background:var(--feather)}
.svc-bar{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--cream);transition:width .5s cubic-bezier(.22,1,.36,1)}
.svc-txt-card:hover .svc-bar{width:100%}
.svc-num{font-size:.65rem;letter-spacing:.2em;color:var(--muted)}
.svc-name{font-family:var(--serif);font-size:2rem;font-weight:400;margin:.75rem 0}
.svc-desc{font-size:.88rem;color:var(--mid);max-width:30ch;line-height:1.75;flex:1}
.svc-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;margin-top:1.5rem;transition:gap .2s}
.svc-link:hover{gap:.7rem}

/* ── POR QUE ── */
.porque{padding:9rem 4rem;display:grid;grid-template-columns:200px 1fr;gap:6rem;align-items:start}
.pq-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.pq-line{width:2.5rem;height:1px;background:var(--cream);margin-bottom:1.75rem}
.pq-title{font-family:var(--serif);font-size:1.25rem;font-weight:400;margin-bottom:.75rem}
.pq-desc{font-size:.88rem;color:var(--mid);line-height:1.8}

/* ── FOTOS GRID ── */
.fotos{padding:9rem 4rem;background:var(--porcelain)}
.fotos h2{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:300;margin-bottom:3rem}
.fotos-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:280px 280px;gap:16px}
.foto-item{border-radius:var(--r);overflow:hidden;position:relative}
.foto-item.tall{grid-row:span 2}
.foto-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.foto-item:hover img{transform:scale(1.04)}
.foto-label{position:absolute;bottom:16px;left:20px;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,249,246,.75);font-family:var(--sans)}

/* ── QUOTE ── */
.quote{padding:7rem 4rem;background:var(--cream);text-align:center;position:relative;overflow:hidden}
.quote::before{content:'\201C';position:absolute;top:-1rem;left:50%;transform:translateX(-50%);font-family:var(--serif);font-size:14rem;color:rgba(42,32,24,.06);line-height:1;pointer-events:none}
.qt{font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.4rem);font-weight:300;font-style:italic;max-width:32ch;margin:0 auto;line-height:1.45;position:relative}
.qa{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin-top:2rem}

/* ── CTA ── */
.cta{padding:10rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.cta-h{font-family:var(--serif);font-size:clamp(2.5rem,4.5vw,4.5rem);font-weight:300;line-height:1.1}
.cta-h em{font-style:italic;color:var(--mid)}
.cta-b p{font-size:1rem;color:var(--mid);max-width:44ch;line-height:1.8;margin-bottom:2.5rem}
.cta-acts{display:flex;align-items:center;gap:2rem}
.cta-note{font-size:.7rem;color:var(--muted);letter-spacing:.05em;margin-top:1.25rem}




/*--- TRATAMIENTOS--*/

.hero-sec {
  background: var(--porcelain);
  padding: 160px 2.5rem 80px;
  text-align: center;
  background: url(https://new.selah.cl/wp-content/uploads/2026/08/armonizacion-facial.png);
  background-size: cover;
  position: relative;
  z-index: 1;
}
.hero-sec:before{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(244,241,255,.4);
} 
.hero-eyebrow {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--mid);
  margin-bottom: 1.5rem;
  font-weight: 400;
  z-index: 10;
  position: relative;
  background: rgba(255,255,255,.5);
  display: inline-block;
  padding: 2px;
}
 
.hero-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
 
.hero-subtitle {
  font-size: 1rem;
  color: var(--mid);
  max-width: 38ch;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  font-weight: 300;
  position: relative;
  background: rgba(255,255,255,.5);
  display: inline-block;
  padding: 2px;
}
 
.hero-divider {
  width: 3rem;
  height: 1px;
  background: var(--cream);
  margin: 0 auto;
}
 
/* ==========================================================================
   Category sticky nav (A / B / C / D tabs)
   ========================================================================== */
 
.cat-nav {
  position: sticky;
  top: 68px;
  z-index: 90;
  background: rgba(250, 249, 246, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
}
 
.cat-nav-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
 
.cat-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  padding: 1rem 0;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
 
.cat-tab:hover {
  color: var(--ink);
}
 
.cat-tab.active {
  color: var(--ink);
  border-bottom-color: var(--madera);
}
 
/* ==========================================================================
   Main layout
   ========================================================================== */
 
.main-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
 
.cat-section {
  padding: 6rem 0 4rem;
}
 
.cat-section--divider {
  border-top: 1px solid var(--line);
}
 
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
 
.cat-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.15;
}
 
.cat-title--with-intro {
  margin-bottom: 1.25rem;
}
 
.cat-intro {
  font-size: .95rem;
  color: var(--mid);
  line-height: 1.85;
  max-width: 58ch;
  font-weight: 300;
}
 
.cat-photo-wrap {
  align-self: center;
}
 
.cat-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
}
 
/* ==========================================================================
   Treatment cards
   ========================================================================== */
 
.treat-card {
  border-top: 1px solid var(--line);
}
 
.card-body {
  display: grid;
  grid-template-columns:1fr 1fr;
  gap: 10px;
  padding: 2em;
  transition:.3s;
}
.card-body:hover{
  background: var(--line);
} 
.card-main {
  flex: 1;
  min-width: 0;
}
 
.treat-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: .4rem;
}
 
.treat-title--tight {
  margin-bottom: .75rem;
}
 
.treat-duration {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: .75rem;
}
 
.treat-desc {
  font-size: .95rem;
  color: var(--mid);
  line-height: 1.85;
  max-width: 60ch;
  margin-bottom: 1rem;
}
 
.treat-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: .5rem;
}
 
.treat-list {
  margin-bottom: 1rem;
}
 
.treat-item {
  font-size: .88rem;
  color: var(--mid);
  padding: .2rem 0;
  line-height: 1.6;
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
 
.treat-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mid);
  opacity: .5;
  margin-top: .52em;
  display: block;
}
 
.treat-note {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 60ch;
  font-style: italic;
}
 
.treat-note-label {
  font-style: normal;
  font-weight: 500;
}
 
.treat-cta {
  margin-top: 1.5rem;
}
 
.cta-link {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--madera);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
 
.cta-link:hover {
  color: var(--madera-dark);
  border-bottom-color: currentColor;
}
 
.treat-img {
  flex: 0 0 260px;
  min-width: 0;
  align-self: flex-start;
  padding-top: .25rem;
  height: 100%;
}
 
.treat-img img{
  width: 100%;
  height: 100%;
 object-fit: cover;
  aspect-ratio: 16 / 9;
}
 
/* ==========================================================================
   Evaluation badges
   ========================================================================== */
 
.eval-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .4rem .9rem;
  border-radius: 999px;
  font-weight: 400;
}
 
.eval-badge.derm,
.eval-badge.required {
  color: #9a5b3f;
  background: rgba(154, 91, 63, .08);
}
 
.eval-badge.conditional {
  color: #8a7a3f;
  background: rgba(138, 122, 63, .08);
}
 
.eval-badge.free {
  color: #4f7a5c;
  background: rgba(79, 122, 92, .08);
}
/*FIN TRATAMIENTO*/
/*--- EQUIPO--*/

.hero-sec-team {
  background: var(--porcelain);
  padding: 160px 2.5rem 80px;
  text-align: center;
  background: url(https://new.selah.cl/wp-content/uploads/2026/08/Interior2.png);
  background-size: cover;
  position: relative;
  z-index: 1;
}
.container-team{
  background: var(--porcelain);
  padding: 2em;
}
.container-team h2{
     
   font-family: var(--serif);
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 300;
    color: var(--ink);
    line-height: 1.15;
}
.text-team h2{
   font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
}
.content-team{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 3em;
}
.text-team h2{
  font-family: var(--serif);
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 300;
    color: var(--ink);
    line-height: 1.15;
}
.content-team img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*FIN EQUIPO*/

/*--CONTACTO*/
.hero-sec-contact{
  background: url(https://new.selah.cl/wp-content/uploads/2026/08/EnElSillon.png);

}
.container-contact{
  padding: 3em;
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
}

.urgent-box {
  background: var(--sage);
  color: var(--text-light);
  padding: 28px 30px;
  border-left: 3px solid var(--gold);
  margin-bottom: 40px;
}

.urgent-box h3 {
  font-size: 1.05rem;
  color: var(--porcelain);
  margin-bottom: 8px;
}

.urgent-box p {
  font-size: 0.9rem;
  color: var(--porcelain);
  margin-bottom: 14px;
}
.btn-box{
  background: var(--porcelain);
  border-color: var(--porcelain);
  text-decoration: none;
  padding: .5em;
}
.btn-box:hover{
  background: transparent;
  color: #fff;
}
.contact-info-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.contact-info-list li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.contact-info-list .ci-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  stroke: var(--madera);
  fill: none;
  stroke-width: 1.3;
}

.contact-info-list strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 3px;
}

.map-placeholder {
  border: 1px dashed var(--gold-dim);
  padding: 30px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--cream-2);
}

.form-panel {
  background: var(--sage);
  color: var(--text-light);
  padding: 46px;
}
.form-panel p{
  color: #fff;
}
.form-panel h2{
  color: var(--porcelain);
  font-size: 1.6rem
}

/*FIN CONTACTO*/
/* ── FOOTER ── */
footer{background:var(--sage);color:var(--feather);padding:5rem 4rem 2.5rem;border-radius:24px 24px 0 0}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:4rem;padding-bottom:4rem;border-bottom:1px solid rgba(250,249,246,.15)}
.ft-logo img{height:32px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;display:block;margin-bottom:.75rem}
.ft-tag{font-size:.8rem;color:rgba(250,249,246,.45);letter-spacing:.08em;line-height:1.6;max-width:28ch}
.ft-col h4{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,249,246,.35);margin-bottom:1.5rem}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.ft-col ul li a{font-size:.87rem;color:rgba(250,249,246,.65);text-decoration:none;transition:color .2s}
.ft-col ul li a:hover{color:var(--feather)}
.ft-bot{display:flex;justify-content:space-between;align-items:center;padding-top:2rem}
.ft-bot span{font-size:.7rem;color:rgba(250,249,246,.25);letter-spacing:.05em}

/* ── ANIM ── */
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.32s}

@media(max-width:900px){
  .check-btn{
    visibility: visible;
    top: 20%;
  }
  .menu{padding:1.2rem 1.5rem}.nav-links{display:none}
  
  .menu{
    right: 100%;
    top: 0;
    width: 100%;
    height: 200vh;
    z-index: 1000;
    position: fixed;
    overflow: scroll;
    z-index: 1000;
    padding-top: 0;
    transition: .3s;
    background: var(--porcelain);  
  
  }
  .menu {
    flex-direction: column;
    top: 0;
    justify-content: space-around;
    align-content: space-around;

    flex-wrap: wrap;
    height: 100%;
    width: 100%;  
    
  }
  .menu  li{
    flex-direction: column;
    left: 0%;
    align-content: flex-start;
    justify-content: space-around;  
  }
  .menu  li a{
    color: #1A1410;
    z-index: 1;
  }
  .hero-content{padding:8rem 1.5rem 4rem;max-width:none}
  .strip{gap:2rem;padding:1rem 1.5rem}
  .filo,.porque{grid-template-columns:1fr;gap:2rem;padding:5rem 1.5rem}
  .servicios,.fotos{padding:5rem 1.5rem}.svc-grid{grid-template-columns:1fr}
  .fotos-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.foto-item.tall{grid-row:span 1}
  .quote{padding:5rem 1.5rem}
  .cta{grid-template-columns:1fr;gap:3rem;padding:6rem 1.5rem}
  .card-body{grid-template-columns: 1fr;}
  footer{padding:4rem 1.5rem 2rem;border-radius:16px 16px 0 0}.ft-top{grid-template-columns:1fr 1fr;gap:2.5rem}
  .pq-cols{grid-template-columns:1fr;gap:2.5rem}
}