/*
Theme Name: Garcells Interiors
Theme URI: https://garcellsinteriors.com
Author: You
Description: Custom theme for Garcells Interiors (BEM + scalable structure).
Version: 1.3.3
Text Domain: garcells
*/

/* El CSS real vive aquí para mantenerlo escalable */
/*@import url("assets/css/main.css?v4");*/

/* ======================================================================
   0) FONTS
====================================================================== */
@font-face {
  font-family: 'Neuwelt';
  src: url('assets/fonts/Neuwelt-Light.woff2') format('woff2'),
       url('assets/fonts/Neuwelt-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neuwelt';
  src: url('assets/fonts/Neuwelt-Regular.woff2') format('woff2'),
       url('assets/fonts/Neuwelt-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Italic.woff2') format('woff2'),
       url('assets/fonts/Inter-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Regular.woff2') format('woff2'),
       url('assets/fonts/Inter-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ======================================================================
   1) TOKENS
====================================================================== */
:root{
  --bg:#000000;
  --text:#b1b1b1;

  --gold-1: #9f7538;
  --gold-2: #a37949;
  --gold-3: #f3cb99;
  --gold-4: #d1a571;

  --color-border: #1c1c1c;
  --max: 1200px;
  --font-heading : 'Neuwelt';
  --font-btn : 'Neuwelt';
  --font-body : 'Inter';
}

/* ======================================================================
   2) BASE
====================================================================== */
*{ box-sizing:border-box; }
html, body{ 
  height: 100%; 
 
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
font-size: 0.85rem;
font-size: clamp(0.85rem, 0.84rem + 0.050000000000000044vw, 0.9rem);
  line-height: 1.85;

}

a{ color: inherit; text-decoration: none; }
p:first-child { margin-top: 0 ; }
p:last-child { margin-bottom: 0 ; }

h1, .hero__title{
  font-family: var(--font-heading);
  margin:0;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.06;
font-size: 1.7825rem;
font-size: clamp(1.7825rem, 1.339rem + 2.2175000000000002vw, 4rem);
  color: #fff;
  text-transform: uppercase;
  margin-top: -0.15em;
}

.single .page-hero__title{
 padding: 0 1.5rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

h2{
  font-family: var(--font-heading);
  font-weight: 300;

  line-height: 1.18;
/*font-size: 1.55rem;
font-size: clamp(1.55rem, 1.3rem + 1.2499999999999998vw, 2.8rem);*/
font-size: 1.45rem;
font-size: clamp(1.45rem, 1.21rem + 1.2vw, 2.65rem);
  color: #fff;
  margin: -0.2em 0 0.85em 0;
  text-transform: uppercase;
}

/* ======================================================================
   3) LAYOUT UTILITIES (mobile first)
====================================================================== */
.l-container{
  max-width: var(--max);
  margin-inline: auto;
  position:relative;
    padding: 0 1.25rem;
}
.l-container--full{
  max-width: 1850px;
  width: 100%;
  margin-inline: auto;
  position:relative;
  padding: 0 1.25rem;
}

/* spacing helpers */
.section--pt { padding-top: 2.35rem; }
.section--pb { padding-bottom: 2.35rem; }

/* ======================================================================
   4) COMPONENTS (reusable)
====================================================================== */
/* BUTTON */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25em 2em;
font-size: 0.65rem;
font-size: clamp(0.65rem, 0.6rem + 0.25vw, 0.9rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 0.075em solid rgba(255, 255, 255, .2);
  transition: transform .15s ease, opacity .15s ease;
  font-weight: 400;
  font-family: var(--font-btn);
  line-height: initial;
}
.btn:hover{ transform: translateY(-1px); opacity: .95; }

.btn--solid{
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3), var(--gold-4));
  border: none;
  color: #0b0b0b;
}
.btn--outline{
  background: transparent;
  color: var(--gold-3);
  border-color: var(--gold-3);
}

 
 

/* ======================================================================
   5) HEADER (mobile first)
====================================================================== */

.site-header{

  background: rgba(0,0,0,.85);
   /* border-bottom: 1px solid var(--color-border); */


  position: relative;
z-index: 10;
}

.site-header__nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.15rem 0;
  gap: 1rem;
}

/* Logo */
.site-header__brand{
  justify-self: center;
  display: inline-flex;
  align-items: center;
}
.site-header__logo{
font-size: 1rem;
font-size: clamp(1rem, 0.91rem + 0.44999999999999996vw, 1.45rem);
  height: 5em;
  width: auto;
  display: block;

}

/* Menus (WP) - mobile: ocultos, usamos hamburger */
.site-header__menu{
  display: flex;              /* <- ahora SI existe en mobile */
  align-items: center;
  min-width: 44px;            /* <- reserva espacio simétrico */
}
.site-header__menu--left{ justify-content: flex-start; }
.site-header__menu--right{ justify-content: flex-start; }

.site-header__menu-list{
  display: none; 
  align-items:center;
  gap: 4em;
  letter-spacing: 0.015em;
    font-size: 0.95rem;
  font-weight: 400;
  text-transform: uppercase;
  font-family: var(--font-heading);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-header__menu-list a{
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-header__menu-list a:hover{ color: var(--text); }

/* WP current item */
.site-header__menu-list .current-menu-item > a,
.site-header__menu-list .current_page_item > a{
  color: #fff;
  border-bottom-color: var(--text);
}

/* Hamburger - mobile: visible */
.site-header__hamburger{
  display:flex;
  width: 44px;
  height: 44px;

  background: transparent;
  color: var(--text);
  cursor: pointer;
  align-items: center;
     justify-content: flex-end;
border: 0 ;

  margin-left: auto; /* lo empuja a la derecha dentro de menu--right */

  position: relative;
  z-index: 1000000;
}
.site-header__hamburger-bars{
  width: 1.375em;
  height: 0.75em;
  position: relative;
  display: block;
  font-size: 1rem;
}
.site-header__hamburger-bars span{
  position:absolute;
  left:0;
  right:0;
  height:0.07em;
  background: #fff;

  transition: transform .2s ease, top .2s ease, opacity .2s ease, background .2s ease;
}
.site-header__hamburger-bars span:nth-child(1){ top:0; }
.site-header__hamburger-bars span:nth-child(2){ top:0.35em; }
.site-header__hamburger-bars span:nth-child(3){ top:0.70em; }

/* Mobile menu overlay (full screen) */


.site-header__mobile{
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 999000;

  background: rgba(0, 0, 0, 0.98);

  -webkit-backdrop-filter: blur(10px);


  align-items: center;
  justify-content: center;
  padding: 96px 24px 48px;
  overflow: auto;
}



.site-header__mobile.is-open{
  display: flex;
}

/* lista centrada */
.site-header__mobile-list{
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 0rem;
  text-align: center;
  width: min(520px, 100%);
}


.site-header__mobile-list a{
  display: inline-block;
  padding: 0.25em 0 0.05em;   /* 👈 menos espacio abajo */
  color: rgba(211, 211, 211, 0.82);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 1.35rem;
  margin: 0.25rem 0 ;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
  font-weight: 300;
}

 

.site-header__mobile-list .current-menu-item > a,
.site-header__mobile-list .current_page_item > a,
.site-header__mobile-list a:hover{
  color: #fff;
  border-bottom-color: #fff;
  transform: translateY(-1px);
}
/* evita scroll del body cuando el menú está abierto */
body.menu-open{
  overflow: hidden;
    padding-right: 0;
}


/* La X visible sobre negro */
body.menu-open .site-header__hamburger-bars span{
  background: #fff;
}

/* Open state icon (X) */
body.menu-open .site-header__hamburger-bars span:nth-child(1){
  top:5px; transform: rotate(45deg);
}
body.menu-open .site-header__hamburger-bars span:nth-child(2){
  opacity:0;
}
body.menu-open .site-header__hamburger-bars span:nth-child(3){
  top:5px; transform: rotate(-45deg);
}



/* ======================================================================
   6) FRONTPAGE
====================================================================== */
/* HERO */
.hero{
  height: 40vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: #000;
  max-height:  46rem;
}

.hero__actions{
  margin-top: 34px;
  display:flex;
  gap: 16px;
  justify-content:center;
  flex-wrap: wrap;
}

/* GALLERY (simple)
   - Title siempre visible
   - Degradado oscuro permanente */
.gallery--no-top{ padding-top: 0; }

.gallery__grid{
  display: grid;
  grid-template-columns: 1fr; /* mobile first */
  gap: 14px;
}

.gallery__item{
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  background: rgba(255,255,255,.02);
  aspect-ratio: 556.2702 / 410; /* <- tu medida fija */
}

.gallery__item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .95;
  transform: scale(1.001);
  transition: transform .35s ease, opacity .35s ease;
}

.page-template-page-in-progress .gallery__item img{
  filter: grayscale(1);
}

/* Mantengo el micro-zoom solo en la imagen (opcional) */
.gallery__item:hover img{
  transform: scale(1.035);
  opacity: 1;
}

/* Degradado oscuro permanente para legibilidad del texto */
.gallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.4) 0%,
    rgba(0,0,0,.3) 38%,
    rgba(0,0,0,0) 68%
  );
  pointer-events:none;
  z-index: 1;
}

/* Label SIEMPRE visible */
.gallery__label{
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;

  color: #fff;
  font-family: var(--font-btn);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 0.75rem;
  font-size: clamp(0.75rem, 0.72rem + 0.15000000000000002vw, 0.9rem);

  padding: 0;
  background: none;
  box-shadow: none;
  line-height: initial;
  min-width: min(78%, 420px);
  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  pointer-events: none;
  transition: all .25s ease;
}


/* ABOUT US (split) - mobile first: 1 col */
.about-us__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
  align-items: center;
}


.about-us__copy:last-of-type{
  margin-bottom: 0 ;

}
.about-us__actions{ margin-top:2.5rem; }

.about-us__media{
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  background: rgba(255,255,255,.02);
  aspect-ratio: 3.3 / 4;
}
.about-us__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-us__play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.about-us__play-btn{
font-size: 0.85rem;
font-size: clamp(0.85rem, 0.82rem + 0.15000000000000002vw, 1rem);
  width: 4.35em;
  height: 4.35em;
  border-radius: 999px;
  background: rgba(0,0,0,.95);
  display: grid;
  place-items: center;
}
.about-us__play-btn:before{
  font-size: 0.725em;
  content:"";
  display:block;
  width: 0;
  height: 0;
  border-left: 1.25em solid var(--gold-4);
  border-top: 0.8125em solid transparent;
  border-bottom: 0.8125em solid transparent;
  transform: translateX(0.125em);
}
/* TESTIMONIALS - mobile first: 1 slide */
.testimonials__title{
  text-align: center;
  font-family: var(--font-heading);


}

.testimonials__viewport{
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
    user-select: none;
}
.testimonials__viewport:active{ cursor: grabbing; }

.testimonials__track{
  display: flex;
  gap: 28px;
  will-change: transform;
  transition: transform .55s ease;
}

.testimonials__slide{
  flex: 0 0 100%;
}

.testimonials__card{
  border: 1px solid rgba(159,117,56,.75);
  padding: 34px 28px 26px;
  min-height: auto;
  display: flex;
  flex-direction: column;
  position:relative;
  justify-content: space-between;
    cursor: pointer;
}

.testimonials__text{
  margin: 0;
  font-size: 0.975em;
    transition: max-height .55s ease;
}

/* Texto colapsado */
.testimonials__text{
  position: relative;
  max-height: 230px; /* controla el “preview” */
  overflow: hidden;
}
.testimonials__text.is-open{
  max-height: 900px;
}
/* Fade abajo cuando está colapsado */
.testimonials__text:not(.is-open)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 70px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), #000);
  pointer-events:none;
   transition: opacity .55s ease;
}
.testimonials__text.is-open::after{
  opacity: 0;
}

.testimonials__footer{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.testimonials__name{
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .9rem;
  color: rgba(255, 255, 255, .9);
  position: absolute;
  bottom: -0.5rem;
  right: 1rem;
  background: #000;
  padding: 0 1rem;
}

.testimonials__dots{
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 26px;
}

.testimonials__dot{
  width: 8px;
  height: 8px;
   border-radius: 99px;
  background: rgb(36, 36, 36);
  border: 0 ;
  cursor: pointer;
  padding: 0;
    transform: scale(0.85);
}
.testimonials__dot.is-active{
  background: rgba(159,117,56,.95);
  border-color: rgba(159,117,56,.95);
  transform: scale(1);
}

/* ======================================================================
   7) PAGES: SHARED HERO
====================================================================== */
.page-hero{
        padding: 5.5rem 1.25rem 2.5rem 1.25rem;
    text-align: center;
}

/* ======================================================================
   8) ABOUT (THE STUDIO)
====================================================================== */
.page-studio{
  background: var(--bg);
  color: var(--text);
}

/* Title block */
.studio-hero{
  padding: clamp(5.5rem, 9vw, 10rem) 0 2.25rem;
  text-align: center;
}
.studio-hero__title{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.06;
  font-size: clamp(2.6rem, 4.2vw, 4.75rem);
  color: #fff;
}

/* Big image */
.studio-banner{
  padding-top: 0;
}

.studio-banner__img{
  width: 100%;
 height: auto;
  display: block;
}

/* Intro split - mobile first: 1 col */
.studio-intro__grid{
  display: grid;
  grid-template-columns: 1fr;
 
  align-items: start;
}

.studio-intro__copy{
  color: rgba(255,255,255,.60);

}
.studio-intro__copy p{ margin: 0 0 1.2em; }
.studio-intro__copy p:last-child{ margin-bottom: 0; }

/* Section title centered */
.studio-section-title{
  position: relative;
 
text-align:center;
}


/* Services - mobile first: 1 col */
.studio-services__grid{
  display: grid;
  grid-template-columns: 1fr;
}

.studio-services__head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

  .studio-services__card{
  border: 1px solid  var(--color-border);
  padding:1.5rem 1.5rem 1.5rem 1.5rem;
  position: relative;
  min-height: auto;
}



.studio-services__icon{
  height: 2em;
  width: 2em;
  display: grid;
  place-items: center;
font-size: 1rem;
font-size: clamp(1rem, 0.937rem + 0.31499999999999995vw, 1.315rem);
}
.studio-services__icon svg{
  fill: none;
  stroke: rgba(243,203,153,.9);
  stroke-width: 1.5;
}
.studio-services__title{
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 1rem;
  line-height:1.4;
  font-weight: 300;
  color: rgba(255,255,255,.88);
}
.studio-services__list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.55);
  line-height: 1.7;

}
.studio-services__list li{
  position: relative;

}
.studio-services__list li::before{
  content: "";
  position: absolute;
  left: 0;
  font-weight: 100;
  color: rgba(93, 93, 93, 0.9);
}

/* Founder block - mobile first: 1 col */
.studio-founder__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
  align-items: center;
}
.studio-founder__photo{
--photo-space: 0.95rem;
--photo-space-neg: -0.95rem;
  position: relative;
  display: inline-block;
  margin-left: var(--photo-space);
}
.studio-founder__photo::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, var(--gold-1), var(--gold-4)) border-box;
  transform: translate(var(--photo-space-neg), var(--photo-space));
  z-index: 0;
}
.studio-founder__img{
  position: relative;
  z-index: 1;
}
.studio-founder__photo img,
.studio-founder__img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.studio-founder__title{
  font-family: var(--font-heading);
}

/* Accordion */
.studio-accordion{

  margin-top: 1rem;
}
.studio-accordion details{
  border-bottom: 1px solid var(--color-border);
  padding: 1.35em 0 ;
}

.studio-accordion details:last-of-type{
 border-bottom: 0 ;
}
.studio-accordion summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  font-family: var(--font-heading);
  font-weight:300;

  text-transform: uppercase;
  font-size: 1rem;
  color: #fff
}
.studio-accordion summary::-webkit-details-marker{ display:none; }
.studio-accordion__chev{
  width: 1.2em;
  height: 1.2em;
  display: grid;
  place-items: center;
  margin-top: -.25em;
  flex: 0 0 auto;
  font-size: 1rem;
}
.studio-accordion__chev::before{
  content:"";
  width: .5em;
  height: .5em;
  border-right: 0.0825em solid rgba(255,255,255,.55);
  border-bottom: 0.0825em solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  display: block;
}
.studio-accordion details[open] .studio-accordion__chev::before{
  transform: rotate(-135deg);
}
.studio-accordion__body{
  padding: 12px 0 2px;
  color: rgba(255,255,255,.58);

}

/* ======================================================================
   9) CONTACT US
====================================================================== */
.page-contact__grid{
  display: grid;
  grid-template-columns: 1fr; /* mobile first */
  gap: 3rem;
  align-items: start;
}

/* Info column */
.page-contact__info a{
  color: rgba(255,255,255,.75);

  text-underline-offset: 3px;
}
.page-contact__info a:hover{
  color: rgba(255,255,255,.95);
}
.page-contact__info a:last-child{
 text-decoration: underline;
}


.page-contact__form{
  order: 2;
}

.page-contact__info{
  order: 1;
}

/* CONTACT US - CF7 Dark UI */
.cf7-dark{
  --bg: rgba(255,255,255,.05);
  --bd: rgba(255,255,255,.10);
  --bd2: rgba(255,255,255,.18);
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --radius: 10px;
}
.cf7-dark p{ margin: 0 ; }

/* Layout */
.cf7-dark .cf7-row{
  display: grid;
  gap: 25px;
  margin-bottom: 25px;
}
.cf7-dark .cf7-row--3{
  grid-template-columns: 1fr; /* mobile first */
}

/* Tus labels son <label class="cf7-field"> ... */
.cf7-dark .cf7-field{
  display: block;
  margin: 0;
}
.cf7-dark .cf7-label{
  display: inline-block;
  margin: 0 0 0.05em;
  font-size: 0.785rem;
  color: var(--muted);
  color: #9b9a9a;
}
.cf7-dark .cf7-req{ margin-right: 3px; }

/* ✅ Inputs reales de CF7 (sin clases extra) */
.cf7-dark .wpcf7-form-control:not(.wpcf7-submit){
  width: 100%;
  box-sizing: border-box;
  background: #121212;
  color: var(--txt);
  border: 0;
  padding:  1.15em;
font-size: 0.825rem;
font-size: clamp(0.825rem, 0.815rem + 0.050000000000000044vw, 0.875rem);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  font-family: var(--font-body);
}

/* Placeholders */
.cf7-dark .wpcf7-form-control::placeholder{
  color:  #121212;
}

/* Botón */
.cf7-dark .cf7-actions{ margin-top: 6px; }
.cf7-dark .cf7-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 1rem;
  padding: 1.45em 2em;

  letter-spacing: .05em;
  text-transform: uppercase;

  font-weight: 400;
  font-family: var(--font-btn);

  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, var(--gold-1), var(--gold-2), var(--gold-3), var(--gold-4));
  color: #0b0b0b;

  transition: transform .15s ease, opacity .15s ease;
}
.cf7-dark .cf7-btn:hover{
  transform: translateY(-1px);
  opacity: .95;
}

/* Validación CF7 */
.cf7-dark .wpcf7-not-valid-tip{
  margin-top: 5px;
  color: var(--gold-2);
}
.cf7-dark .wpcf7-response-output{
  margin: 16px 0 0;
  border-radius: 10px;
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}


.wpcf7-not-valid-tip {

    font-size: 0.7rem !important;

}


.wpcf7 form .wpcf7-response-output{
  border: 0 !important;
    padding: 0 !important;
    font-size: 0.7rem !important;
    margin: 1.5rem 0 0 0 !important;
      color: var(--gold-2);

}

/* Chrome/Safari autofill */
.cf7-dark input.wpcf7-form-control:-webkit-autofill,
.cf7-dark textarea.wpcf7-form-control:-webkit-autofill,
.cf7-dark input.wpcf7-form-control:-webkit-autofill:hover,
.cf7-dark textarea.wpcf7-form-control:-webkit-autofill:hover,
.cf7-dark input.wpcf7-form-control:-webkit-autofill:focus,
.cf7-dark textarea.wpcf7-form-control:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  -webkit-box-shadow: 0 0 0px 1000px #121212 inset !important; /* fuerza fondo oscuro */
  box-shadow: 0 0 0px 1000px #121212 inset !important;
  caret-color: rgba(255,255,255,.92) !important;
  transition: background-color 9999s ease-in-out 0s; /* truco para que no “parpadee” */
}

/* iOS (a veces aplica estilos propios) */
.cf7-dark input.wpcf7-form-control,
.cf7-dark textarea.wpcf7-form-control{
  -webkit-appearance: none;
  appearance: none;
}
  
/* ======================================================================
   10) SINGLE PROJECT
====================================================================== */
.project-single__title{
  text-align:center;
  margin: 40px 0 24px;
}

/* ======================================================================
   MASONRY GALLERY (Single Project)
====================================================================== */

.masonry figure{ 
 margin: 0 ;
 
}
.masonry {
  position: relative;
  margin-left: -7px;
  margin-right: -7px;
}

.masonry::after {
  content: "";
  display: block;
  clear: both;
}

.masonry__sizer {
  width: 100%;
}

.masonry__item {
  float: left;
  width: 100%;
 padding-left: 7px;
	padding-right: 7px;
		padding-top: 7px;
		padding-bottom: 7px;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.masonry__item a {
  display: block;
  position: relative;
  cursor: pointer;
}

.masonry__item a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.06);
  opacity: 0;
  transition: opacity .35s ease;
}

.masonry__item:hover a::after {
  opacity: 1;
}

.masonry__img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform .6s cubic-bezier(0.19, 1, 0.22, 1), opacity .35s ease;
}

.masonry__item:hover .masonry__img {
  transform: scale(1.05);
  opacity: 0.6;
}

@media (min-width: 790px) {
  .masonry__sizer,
  .masonry__item {
    width: 50%;
  }
}

@media (min-width: 1340px) {
  .masonry__sizer,
  .masonry__item {
    width: 33.3333%;
  }
}


/* ======================================================================
    PROJECTS NAV
====================================================================== */


/* Project nav */
.page-hero--project{ position: relative; }

.project-nav{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  z-index: 50;
  justify-content: space-between;
  pointer-events: none;
}

.project-nav__btn{
  pointer-events: auto;
    font-size: 1.15rem;
    width: 2.875em;
  height: 2.875em;
  display: inline-flex;
  align-items: center;

  text-decoration: none;

  transition: transform .2s ease, background .2s ease, opacity .2s ease;
  opacity: .8;
  position: relative;
  z-index: 51;
}


.project-nav__btn--next{
  margin-left: auto;
  justify-content: flex-end;
}


.project-nav__btn:hover{
  background: rgba(0,0,0,.55);
  opacity: 1;
}

.project-nav__icon{
  width: 0.66em;
  height: 0.66em;
  border-top: 0.065em solid #fff;
  border-right: 0.065em solid hsl(0, 0%, 100%);
  transform: rotate(45deg);
}

/* arrow left */
.project-nav__btn--prev .project-nav__icon{
  transform: rotate(-135deg);
}

/* arrow right */
.project-nav__btn--next .project-nav__icon{
  transform: rotate(45deg);
}



/* ======================================================================
   11) FOOTER (mobile first)
====================================================================== */
.site-footer{
    background: #000;
  font-size: 0.8rem;
  font-size: clamp(0.8rem, 0.775rem + 0.125vw, 0.925rem);
    margin-top: 3rem;
    border-top: 1px solid var(--color-border);
    padding: 3rem 0;
}

.site-footer__top{
  display: grid;
  grid-template-columns: 1fr 1fr; /* mobile first */
  gap: 2rem 0;
  align-items: start;
  padding: 0   0  4rem 0;

}




.site-footer__brand{
  display: inline-flex;
  align-items: center;
}
.site-footer__logo{

font-size: 1rem;
font-size: clamp(1rem, 0.944rem + 0.28vw, 1.28rem);
  width: 9.875em; /* mobile first */
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

.site-footer__title{
  font-family: var(--font-heading);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  margin: 0 0 0.75em;
  font-size: 0.9rem;
font-size: clamp(0.9rem, 0.889rem + 0.05499999999999994vw, 0.955rem);
}

.site-footer__links{
  display: grid;

  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer__links a,
.site-footer__text{
  color: rgba(255,255,255,.55);
  line-height: 2.25;
  transition: color .15s ease;
}
.site-footer__links a:hover{ color: rgba(255,255,255,.9); }


.site-footer__bottom{
 
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35em;
  color: rgba(255,255,255,.45);
font-size: 0.7rem;
font-size: clamp(0.7rem, 0.6799999999999999rem + 0.10000000000000009vw, 0.8rem);
}

.site-footer__bottom a{
  color: rgba(255,255,255,.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__bottom a:hover{ color: rgba(255,255,255,.9); }

/* ======================================================================
   12) RESPONSIVE (AL FINAL) — mobile first → min-width
   - Breakpoint principal: 999px
   - Extras “técnicos” (masonry / grid intermedio) para no matar tablets
====================================================================== */

/* ---- 560px: footer pasa a 2 cols y recupera padding que tenías ---- */

 
/* ---- 999px: breakpoint PRINCIPAL (desktop) ---- */




@media (max-width: 999px){

/* 1) Brand full */
.site-footer__top > :first-child{
  grid-column: 1 / -1;
}

/* 4) Contact full */
.site-footer__top > :last-child{
  grid-column: 1 / -1;
}
}





@media (min-width: 790px){

 

  /*  .masonry{ column-count: 2; } */
	
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 999px){

 

  .hero{
    height: 62vh;

  }


  /* spacing helpers */
  .section--pt { padding-top: 6rem; }
  .section--pb { padding-bottom: 6rem; }

  /* HEADER: desktop menus visibles, hamburger oculto */
    .site-header{
    padding: 0 3rem;
  
  }


  /*GALLERY*/
  /* Hover: fondo dorado elegante */
.gallery__item:hover .gallery__label{
  background: linear-gradient(
    135deg,
    var(--gold-1),
    var(--gold-2),
    var(--gold-3),
    var(--gold-4)
  );
  color: #0b0b0b;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  padding: 1.25em 2em;
  font-weight: 400;
}



  .site-header__menu{ display:flex; }
  .site-header__menu-list{ display: flex; }
  .site-header__hamburger{ display: none; }
  .site-header__menu--right{ justify-content: flex-end; }
  .site-header__mobile{ display:none; } /* seguridad */
 


  /* ABOUT-US: split 2 cols + copy limitado */
  .about-us__grid{
    grid-template-columns: 1fr 1.25fr;
   
  }
  .about-us__copy{ max-width: 52ch; }



  .studio-services__card{
  border: 1px solid  var(--color-border);
  padding: 3rem 2.5rem 3rem 2.5rem;
  position: relative;
  min-height: auto;
}


.studio-founder__photo{
--photo-space: 1.3rem;
--photo-space-neg: -1.3rem;

}

  /* TESTIMONIALS: 2 slides + card “grande” */
  .testimonials__title{ margin: 0 0 56px; }
  .testimonials__slide{
    flex: 0 0 calc((100% - 28px) / 2);
  }
  .testimonials__card{
    padding: 2rem 2.5rem;
    min-height: 360px;
  }

  /* CONTACT: 2 columnas */
  .page-contact__grid{
    grid-template-columns: 2fr 1fr;
    gap: 5rem;
    
  }

  .page-contact__form{
  order: 1;
}

.page-contact__info{
  order: 2;
}

/* Form*/
  .cf7-dark .cf7-row--3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* THE STUDIO: grids a desktop */
  .studio-intro__grid{
    grid-template-columns: 0.95fr 1.35fr;
    gap: 5rem;
  }
  .studio-services__grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .studio-founder__grid{
    grid-template-columns: 1.25fr 1.5fr;
  }

  /* FOOTER: 4 columnas + logo grande */
  .site-footer__top{
    grid-template-columns: 1.45fr 1fr 1fr 1.45fr;
    gap: 2rem;
  }
 

  
/*Single Project*/
.project-nav__btn{

    font-size: 1.75rem;

}



  /*Page Hero*/
  .page-hero{
    padding: 14rem 1rem 3.5rem 1rem;

}

/*Footer*/
.site-footer{
   padding: 5rem 0 ;
   margin-top: 5rem;
}

	
	


}


/*Fancybox*/
.fancybox__backdrop {

    background: rgb(0 0 0 / 92%) !important;
}

.fancybox__caption{
 display: none !important;
}



@media (min-width: 1340px){
  .gallery__grid{ 
	  grid-template-columns: repeat(3, 1fr); 
	}
	
	/*
	
    .masonry{ column-count: 3; }*/
	
}