@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');




:root {



  --red: #be1620;



  --red-dark: #8c0f16;



  --red-light: #be1620;



  --black: #ffffff;



  --dark: #f2f4f6;



  --surface: #eaedf0;



  --surface2: #d1d7dc;



  --white: #1a1a1a;



  --cream: #ffffff;



  --muted: #6c757d;



  --dim: #adb5bd;



  --border: rgba(0,0,0,0.08);



}



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



html { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--black); color: var(--white); scroll-behavior: smooth; overflow-x: hidden; }



body { overflow-x: hidden; }







/* ─── NAV ─── */



nav {



  position: fixed; top: 0; left: 0; right: 0; z-index: 200;



  display: flex; align-items: center; justify-content: space-between;



  padding: 0 48px; height: 84px;



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



  transition: background 0.4s, border-bottom 0.4s;



}



nav.scrolled {



  background: #333333;



  border-bottom: 1px solid rgba(255,255,255,0.05);



  backdrop-filter: blur(12px);



}



.nav-logo img { height: 88px !important; max-height: 88px !important; width: auto; object-fit: contain; transition: filter 0.3s, transform 0.3s; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }



body.home .nav-logo img { height: 88px !important; max-height: 88px !important; width: auto; object-fit: contain; transition: filter 0.3s, transform 0.3s; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); } /* Keep on dark hero */











.nav-links { display: flex; gap: 32px; align-items: center; position: relative; }



.nav-links > .nav-item > a {



  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;



  color: #1a1a1a; text-decoration: none; transition: color 0.2s;



  padding: 10px 0;



}



body.home .nav-links > .nav-item > a { color: #111827; }



nav.scrolled .nav-links > .nav-item > a { color: #111827; }







.nav-item { position: relative; display: inline-block; }



.dropdown {



  background: #f0f2f5;



  border: 1px solid #cbd5e1;



  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);



  background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.05);



  padding: 12px 0; border-radius: 6px; min-width: 180px; opacity: 0; pointer-events: none;



  transition: all 0.3s; z-index: 100;



}



.nav-item:hover .dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }



.dropdown a {



  display: block; padding: 10px 24px; font-size: 11px; color: var(--muted);



  text-align: center; text-transform: none; letter-spacing: 1px; font-weight: 500;



  text-decoration: none;



}



.dropdown a:hover { color: var(--red); background: rgba(200,16,46,0.04); }



.nav-cta {



  background: var(--red); color: #ffffff;



  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;



  padding: 10px 24px; text-decoration: none; border: none; cursor: pointer;



  transition: background 0.2s; font-family: 'Plus Jakarta Sans', sans-serif;



}



.nav-cta:hover { background: var(--red-light); }







/* ─── HERO ─── */



.hero {



  position: relative; height: 100vh; min-height: 680px;



  display: flex; align-items: flex-end; overflow: hidden;



}



.hero-bg {



  position: absolute; inset: 0;



  background-image: url('./highres_imgs/portada_ai.webp');



  background-size: cover; background-position: center 30%;



  transform: scale(1.06);



  animation: zoomOut 14s ease-out forwards;



}



@keyframes zoomOut { from { transform: scale(1.06); } to { transform: scale(1.0); } }



.hero-grad {



  position: absolute; inset: 0;



  background: linear-gradient(165deg, rgba(13,13,13,0.1) 0%, rgba(13,13,13,0.55) 55%, rgba(13,13,13,0.96) 100%);



  



}



.hero-red-line {



  position: absolute; left: 0; top: 0; bottom: 0;



  width: 4px; background: var(--red);



}



.hero-content {



  position: relative; z-index: 2;



  padding: 0 52px 88px;



  animation: riseIn 1s ease 0.2s both;



}



@keyframes riseIn { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }



.hero-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 3.5px; text-transform: uppercase; color: #be1620 !important; margin-bottom: 20px; text-shadow: 0 2px 8px rgba(0,0,0,0.9); }



.hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--red); }



.hero-h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(48px, 6.5vw, 88px) !important; font-weight: 700; line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 24px; max-width: 940px; color: #ffffff; text-shadow: 0 4px 24px rgba(0,0,0,0.75); }

.hero-h1 em { font-style: italic; color: var(--red-light); }



.hero-sub { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,0.9); line-height: 1.6 !important; max-width: 560px !important; margin-bottom: 40px; }



.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }



.btn-red {



  background: var(--red); color: #ffffff;



  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;



  padding: 15px 36px; text-decoration: none; transition: background 0.2s, transform 0.2s;



  border: none; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;



}



.btn-red:hover { background: var(--red-light); transform: translateY(-1px); }



.btn-outline {



  background: transparent; color: #ffffff;



  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;



  padding: 14px 32px; text-decoration: none; border: 1px solid rgba(255,255,255,0.2);



  transition: border-color 0.2s, color 0.2s;



}



.btn-outline:hover { border-color: #ffffff; background: rgba(255,255,255,0.1); color: #ffffff; }







.hero-right {



  position: absolute; right: 52px; bottom: 88px; z-index: 2;



  display: flex; flex-direction: column; gap: 24px; align-items: flex-end;



  animation: riseIn 1s ease 0.4s both;



}



.hero-stat .n {



  font-family: 'Plus Jakarta Sans', sans-serif;



  font-size: 36px; font-weight: 400; color: #ffffff; line-height: 1; text-align: right;



}



.hero-stat .n span:last-child { color: var(--red-light); font-size: 24px;  margin-left: 6px; }



.hero-stat .l { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); text-align: right; margin-top: 3px; }







/* ─── TICKER BAND ─── */



.ticker {



  background: var(--red); overflow: hidden; height: 52px;



  display: flex; align-items: center;



}



.ticker-track {



  display: flex; gap: 0; white-space: nowrap;



  animation: ticker 28s linear infinite;



}



@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }



.ticker-item { display: inline-flex; align-items: center; gap: 16px; font-size: 1.15rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; padding: 14px 0; }



.ticker-dot { width: 4px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 50%; }







/* ─── SECTION LABEL ─── */



.sec-label {



  display: flex; align-items: center; gap: 14px;



  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;



  color: var(--red-light); margin-bottom: 18px;



}



.sec-label::before { content: ''; width: 24px; height: 1px; background: var(--red); }



.sec-h {



  font-family: 'Plus Jakarta Sans', sans-serif;



  font-size: clamp(34px, 4.5vw, 58px); font-weight: 400; line-height: 1.1;



  margin-bottom: 16px;



}



.sec-h em { font-style: italic; color: var(--red-light); }



.sec-p { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 20.5px !important; font-weight: 400 !important; color: #1f2937 !important; line-height: 1.75 !important; text-align: center !important; margin: 0 auto 36px !important; max-width: 840px !important; display: block !important; }







/* ─── PÉRGOLAS ─── */



.pergolas { background: var(--black); padding: 96px 0 0; }



.pergolas-header { padding: 0 52px 56px; }







.pergolas-tabs {



  display: flex; gap: 0; padding: 0 52px; margin-bottom: 0;



  border-bottom: 1px solid var(--border);



}



.ptab {



  padding: 14px 28px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;



  color: var(--muted); background: none; border: none; cursor: pointer;



  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s;



  font-family: 'Plus Jakarta Sans', sans-serif;



}



.ptab.active { color: var(--white); border-bottom-color: var(--red); }



.ptab:hover:not(.active) { color: var(--dim); }







.ptab-content,
.tab-panel { display: none; }

.ptab-content.active,
.tab-panel.active { display: block; }







.pergola-split { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 580px; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 40px; }

.pergola-img-wrap,
.carousel-wrap {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  min-height: 580px;
  width: 100%;
}

.pergola-img,
.carousel-wrap .pergola-img,
.carousel-slide img {
  width: 100%;
  height: 100%;
  min-height: 580px;
  object-fit: cover;
  object-position: center center;
  transition: filter 0.5s, transform 0.6s;
  display: block;
}

.pergola-img-wrap:hover .pergola-img {
  transform: scale(1.02);
}

.carousel-slide {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slide.active {
  display: block;
  width: 100%;
  height: 100%;
}

.pergola-img-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  font-weight: 700;
  border-radius: 4px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.pergola-info {
  background: var(--dark);
  padding: 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--border);
}

.pergola-info h2,
.pergola-info h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(28px, 3.2vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #1a1a1a !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
  white-space: normal;
}

.pergola-info .tab-desc,
.pergola-info p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  color: #4a4a4a !important;
  line-height: 1.75 !important;
  margin-bottom: 24px !important;
}



.feature-list { margin-bottom: 36px; }



.feature-item {



  display: flex; align-items: flex-start; gap: 14px;



  padding: 12px 0; border-bottom: 1px solid var(--border);



}



.feature-icon {



  width: 32px; height: 32px; flex-shrink: 0;



  border: 1px solid rgba(200,16,46,0.3);



  display: flex; align-items: center; justify-content: center; margin-top: 1px;



}



.feature-icon svg { width: 15px; height: 15px; stroke: var(--red-light); fill: none; stroke-width: 1.5; }



.feature-text h5 { display: block; font-size: 19.5px; font-weight: 700; color: #111827; margin-bottom: 6px; line-height: 1.4; font-family: 'Plus Jakarta Sans', sans-serif; }
.feature-text p { display: block; font-size: 17.5px; color: #374151; line-height: 1.7; font-weight: 400; font-family: 'Plus Jakarta Sans', sans-serif; }







/* Mini gallery strip */



.mini-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 2px; }



.mini-cell { position: relative; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }



.mini-cell img {



  width: 100%; height: 100%; object-fit: cover;



  transition: all 0.4s;



}



.mini-cell:hover img { transform: scale(1.05); }



.mini-cell-label {



  position: absolute; bottom: 0; left: 0; right: 0;



  padding: 16px 14px 12px;



  background: linear-gradient(to top, rgba(13,13,13,0.9) 0%, transparent 100%);



  font-size: 11px; letter-spacing: 1px; color: rgba(255,255,255,0.8);



}







/* ─── TECHOS ─── */



.techos { background: var(--surface); padding: 96px 0; }



.techos-inner { padding: 0 52px; }



.techos-header { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 56px; align-items: end; }







.techos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }



.techo-card {



  position: relative; overflow: hidden; cursor: pointer;



  aspect-ratio: 3/4;



}



.techo-card img {



  width: 100%; height: 100%; object-fit: cover; object-position: center center;



  transition: all 0.5s;



}



.techo-card:hover img { transform: scale(1.04); }



.techo-card-grad {



  position: absolute; inset: 0;



  background: linear-gradient(to top, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.2) 55%, transparent 100%);



}



.techo-card-body {



  position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 22px;



}



.techo-type { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--red-light); display: block; margin-bottom: 6px; }



.techo-name {



  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 400; color: #ffffff;



  line-height: 1.2; margin-bottom: 8px;



}



.techo-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: rgba(255,255,255,0.9); line-height: 1.6;



  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;



}



.techo-card:hover .techo-desc { max-height: 80px; opacity: 1; }



.techo-cta {



  display: inline-flex; align-items: center; gap: 6px;



  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--red-light);



  margin-top: 12px; opacity: 0; transform: translateY(6px);



  transition: opacity 0.3s, transform 0.3s;



}



.techo-card:hover .techo-cta { opacity: 1; transform: translateY(0); }







/* ─── VENTANAS ─── */



.ventanas { background: var(--black); padding: 96px 0; }



.ventanas-inner { padding: 0 52px; }



.ventanas-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 56px; align-items: end; }



.ventanas-types-nav {



  display: flex; gap: 10px; flex-wrap: wrap; padding: 0 52px; margin-bottom: 32px;



}



.vtype-btn {



  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;



  padding: 8px 20px; border: 1px solid rgba(0,0,0,0.12);



  color: var(--muted); background: none; cursor: pointer; transition: all 0.2s;



  font-family: 'Plus Jakarta Sans', sans-serif;



}



.vtype-btn.active { border-color: var(--red); color: var(--red-dark); background: rgba(200,16,46,0.1); }



.vtype-btn:hover:not(.active) { border-color: rgba(0,0,0,0.3); color: rgba(0,0,0,0.6); }







.ventanas-showcase {



  display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px;



  padding: 0 52px;



}



.v-main { position: relative; overflow: hidden; aspect-ratio: 3/2; }



.v-main img {



  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;



  transition: filter 0.5s;



}



.v-main:hover img { }



.v-main-overlay {



  position: absolute; inset: 0;



  background: linear-gradient(to top, rgba(13,13,13,0.88) 0%, transparent 60%);



}



.v-main-label {



  position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px;



}



.v-main-label .type { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--red-light); margin-bottom: 8px; display: block; }



.v-main-label h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; font-weight: 400; margin-bottom: 10px; color: #ffffff; }



.v-main-label p { font-family: 'Plus Jakarta Sans', sans-serif; color: rgba(255,255,255,0.9); line-height: 1.7; }







.v-sidebar { display: flex; flex-direction: column; gap: 12px; }



.v-card { position: relative; overflow: hidden; flex: 1; cursor: pointer; }



.v-card img {



  width: 100%; height: 100%; object-fit: cover; object-position: center center;



  transition: all 0.4s;



  display: block;



}



.v-card:hover img { transform: scale(1.04); }



.v-card-label {



  position: absolute; bottom: 0; left: 0; right: 0;



  padding: 14px 16px;



  background: linear-gradient(to top, rgba(13,13,13,0.9) 0%, transparent 100%);



}



.v-card-label .t { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--red-light); }



.v-card-label .n { font-size: 15px; font-weight: 400; color: #ffffff; margin-top: 2px; font-family: 'Plus Jakarta Sans', sans-serif; }







/* Benefits strip */



.ventanas-benefits {



  display: grid; grid-template-columns: repeat(3,1fr); gap: 0;



  margin: 2px 52px 0; border: 1px solid var(--border);



}



.vbenefit {



  padding: 28px 28px; border-right: 1px solid var(--border);



  display: flex; align-items: flex-start; gap: 16px;



}



.vbenefit:last-child { border-right: none; }



.vbenefit-icon {



  width: 36px; height: 36px; flex-shrink: 0;



  background: rgba(200,16,46,0.1); border: 1px solid rgba(200,16,46,0.2);



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



}



.vbenefit-icon svg { width: 16px; height: 16px; stroke: var(--red-light); fill: none; stroke-width: 1.5; }



.vbenefit-text h5 { display: inline; font-family: \'Playfair Display\', serif; font-size: 17px; font-weight: 700; color: inherit; margin-right: 4px; }



.vbenefit-text p { display: inline; font-family: \'Playfair Display\', serif; font-size: 17px; color: inherit; line-height: 1.6; }







/* ─── BRANDS ─── */



.brands { background: var(--surface); padding: 52px 52px; }



.brands-label, .brands-heading { font-size: clamp(20px, 2.5vw, 28px) !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #1a1a1a !important; font-weight: 700 !important; margin: 48px 0 24px !important; text-align: center !important; font-family: 'Plus Jakarta Sans', sans-serif !important; line-height: 1.3 !important; }



.brands-row { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }



.brands-row img { height: 32px; object-fit: contain; }







/* ─── CONTACT ─── */



.contact { background: #ffffff; padding: 100px 52px; }



.contact-inner {



  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;



}



.contact-left .sec-label { margin-bottom: 20px; }



.contact-left p { font-size: 14px; color: var(--muted); line-height: 1.85; margin-bottom: 36px; }



.contact-info { display: flex; flex-direction: column; gap: 16px; }



.cinfo {



  display: flex; align-items: center; gap: 14px;



  font-size: 14px; color: var(--muted); text-decoration: none;



}



.cinfo-icon {



  width: 36px; height: 36px; background: rgba(200,16,46,0.12);



  display: flex; align-items: center; justify-content: center; flex-shrink: 0;



}



.cinfo-icon svg { width: 16px; height: 16px; stroke: var(--red-light); fill: none; stroke-width: 1.5; }



.contact-form-wrap { background: #e8ebee; padding: 44px 40px; }



.form-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 26px; font-weight: 400; margin-bottom: 28px; }



.form-row { margin-bottom: 16px; }



.form-row label { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }



.form-row input, .form-row select, .form-row textarea {



  width: 100%; background: #ffffff; border: 1px solid var(--border);



  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);



  padding: 12px 16px; color: #1a1a1a; outline: none;



  font-family: 'Plus Jakarta Sans', sans-serif; transition: border-color 0.2s;



  -webkit-appearance: none; appearance: none;



}



.form-row input::placeholder, .form-row textarea::placeholder { color: var(--dim); }



.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: rgba(200,16,46,0.5); }



.form-row select { cursor: pointer; color: var(--muted); }



.form-row select option { background: #ffffff; color: #1a1a1a; }



.form-row textarea { resize: vertical; min-height: 90px; }



.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }







/* ─── FOOTER ─── */



footer {



  background: var(--black); border-top: 1px solid var(--border);



  padding: 36px 52px;



  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;



}



.footer-logo img {
  height: 44px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  opacity: 0.9 !important;
  display: block !important;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.footer-logo img:hover {
  opacity: 1 !important;
}



.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }



.footer-links a { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); text-decoration: none; transition: color 0.2s; }



.footer-links a:hover { color: var(--white); }



.footer-copy { font-size: 11px; color: var(--dim); }







/* ─── FLOAT ─── */



.floats {



  position: fixed; bottom: 28px; right: 28px; z-index: 999;



  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;



}



.float-btn {



  width: 54px; height: 54px; border-radius: 50%;



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



  border: none; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s;



  position: relative;



}



.float-btn:hover { transform: scale(1.1); }



.float-tip {



  position: absolute; right: 66px; top: 50%; transform: translateY(-50%);



  background: var(--surface); color: var(--white); white-space: nowrap;



  font-size: 11px; padding: 6px 14px; opacity: 0; transition: opacity 0.2s;



  border: 1px solid var(--border); pointer-events: none;



}



.float-btn:hover .float-tip { opacity: 1; }



.fw { background: #25D366; box-shadow: 0 4px 18px rgba(37,211,102,0.4); }



.fw:hover { box-shadow: 0 6px 26px rgba(37,211,102,0.6); }



.fc { background: var(--red); box-shadow: 0 4px 18px rgba(200,16,46,0.4); }



.fc:hover { box-shadow: 0 6px 26px rgba(200,16,46,0.6); }



.float-pulse::after {



  content: ''; position: absolute; inset: -5px; border-radius: 50%;



  border: 2px solid currentColor; animation: fp 2.2s ease infinite; opacity: 0;



}



.fw.float-pulse::after { color: #25D366; }



.fc.float-pulse::after { color: var(--red); }



@keyframes fp { 0%{opacity:0.7;transform:scale(1)} 100%{opacity:0;transform:scale(1.55)} }







/* ─── CHAT ─── */



.chat-box {



  position: fixed; bottom: 96px; right: 28px; z-index: 998;



  width: 316px; background: var(--surface);



  border: 1px solid var(--border);



  box-shadow: 0 24px 64px rgba(0,0,0,0.08);



  transform: translateY(14px) scale(0.96); opacity: 0; pointer-events: none;



  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);



}



.chat-box.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }



.chat-top {



  background: var(--red); padding: 14px 18px;



  display: flex; align-items: center; gap: 12px;



}



.chat-dot { width: 8px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 50%; animation: blink 1.6s infinite; }



@keyframes blink { 0%,100%{opacity:1}50%{opacity:0.3} }



.chat-top-info { flex: 1; }



.chat-top-info h4 { color: #ffffff; }



.chat-top-info p { font-size: 10px; color: rgba(255,255,255,0.8); letter-spacing: 0.5px; }



.chat-close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 18px; cursor: pointer; padding: 0; line-height: 1; }



.chat-msgs { padding: 18px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }



.msg { padding: 10px 13px; line-height: 1.65; max-width: 85%; }



.msg-bot { background: #ffffff; border: 1px solid var(--border); border-left: 2px solid var(--red); color: var(--muted); align-self: flex-start; }



.msg-user { background: rgba(200,16,46,0.1); border-right: 2px solid var(--red); color: var(--red-dark); align-self: flex-end; text-align: right; }



.chat-foot { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; }



.chat-foot input {



  flex: 1; background: #ffffff; border: 1px solid var(--border);



  padding: 8px 12px; color: #1a1a1a; outline: none;



  font-family: 'Plus Jakarta Sans', sans-serif; transition: border-color 0.2s;



}



.chat-foot input:focus { border-color: rgba(200,16,46,0.4); }



.chat-foot input::placeholder { color: var(--dim); }



.chat-foot button {



  background: var(--red); border: none; padding: 8px 13px;



  color: var(--white); cursor: pointer; transition: background 0.2s; font-size: 14px;



}



.chat-foot button:hover { background: var(--red-light); }







/* ─── SCROLL REVEAL ─── */



.sr { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; }



.sr.in { opacity: 1; transform: translateY(0); }



.sr1 { transition-delay: 0.1s; } .sr2 { transition-delay: 0.2s; } .sr3 { transition-delay: 0.3s; }







/* ─── DIVIDER ─── */



.divider { height: 1px; background: linear-gradient(to right, transparent, rgba(200,16,46,0.35), transparent); margin: 0 52px; }











/* Nav Toggle */



.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 5px; color: #fff; }



.nav-toggle svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }



nav.scrolled .nav-toggle { color: #ffffff; }



















/* Split Feature Layout */



.split-feature {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 40px;



  align-items: center;



  background: var(--dark);



  padding: 40px;



  border-radius: 8px;



  border: 1px solid var(--border);



  margin-bottom: 40px;



}



.sf-content {



  display: flex;



  flex-direction: column;



  gap: 16px;



}



.sf-label {



  font-size: 11px;



  color: var(--red);



  letter-spacing: 2px;



  text-transform: uppercase;



  font-weight: 600;



}



.sf-title {



  font-size: 32px;



  font-family: 'Plus Jakarta Sans', sans-serif;



  color: var(--white);



}



.sf-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}



.sf-list {



  list-style: none;



  padding: 0;



  margin-top: 16px;



  display: flex;



  flex-direction: column;



  gap: 12px;



}



.sf-list li {



  color: var(--white);



  font-size: 14px;



  display: flex;



  align-items: center;



  gap: 12px;



}



.sf-list li::before {



  content: "✓";



  color: var(--red);



  font-weight: bold;



}



.sf-image-wrap {



  position: relative;



  border-radius: 6px;



  overflow: hidden;



  box-shadow: 0 10px 30px rgba(0,0,0,0.5);



  aspect-ratio: 4/3;



}



.sf-image-wrap img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



}







.puertas-top, .ventanas-top {



  display: flex;



  flex-wrap: wrap;



  gap: 40px;



  justify-content: space-between;



  margin-bottom: 60px;



}



.puertas-top > div, .ventanas-top > div {



  flex: 1;



  min-width: 300px;



}



.ventanas-types-nav {



  display: flex;



  flex-wrap: wrap;



  gap: 12px;



  margin-bottom: 40px;



  clear: both;



}







/* CHAT WIDGET */







/* Premium Chatbot Widget */



.chat-widget {



  position: fixed; bottom: 30px; right: 30px;



  width: 360px; height: 520px;



  background: #f4f6f8;



  border-radius: 12px;



  box-shadow: 0 15px 40px rgba(0,0,0,0.25);



  display: flex; flex-direction: column;



  z-index: 999;



  overflow: hidden;



  font-family: 'Plus Jakarta Sans', sans-serif;



  border: 1px solid rgba(0,0,0,0.05);



}







.chat-header {



  background: #0d1b2a; 



  color: #fff;



  padding: 16px 20px;



  display: flex; align-items: center; justify-content: space-between;



  border-bottom: 2px solid var(--red);



}







.chat-header-info {



  display: flex; align-items: center; gap: 12px;



}







.chat-avatar {



  width: 40px; height: 54px;



  background: #fff; border-radius: 8px;



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



  color: #0d1b2a; font-weight: 900; font-size: 20px;



  font-family: 'Plus Jakarta Sans', sans-serif;



}







.chat-header-text {



  display: flex; flex-direction: column;



}







.chat-header-text strong {



  font-size: 15px; font-weight: 600; letter-spacing: 0.5px;



}







.chat-status {



  font-size: 11px; color: #a0aec0;



  display: flex; align-items: center; gap: 6px; margin-top: 2px;



}







.chat-status::before {



  content: ""; width: 8px; height: 8px; border-radius: 50%;



  background: #38a169;



}







.chat-close {



  background: none; border: none; color: #a0aec0;



  font-size: 24px; cursor: pointer; transition: color 0.2s;



}







.chat-close:hover { color: #fff; }







.chat-body {



  flex: 1; padding: 20px;



  overflow-y: auto;



  display: flex; flex-direction: column; gap: 16px;



}







.chat-msg {



  background: #fff;



  padding: 14px 16px;



  border-radius: 12px;



  border-bottom-left-radius: 4px;



  color: #2d3748;



  font-size: 14px;



  line-height: 1.5;



  box-shadow: 0 2px 5px rgba(0,0,0,0.02);



  max-width: 85%;



  position: relative;



}







.chat-time {



  display: block; text-align: right;



  font-size: 10px; color: #a0aec0;



  margin-top: 8px;



}







.chat-input-area {



  padding: 16px; background: #fff;



  border-top: 1px solid #e2e8f0;



  display: flex; align-items: center; gap: 12px;



}







.chat-input {



  flex: 1; border: 1px solid #e2e8f0;



  border-radius: 24px; padding: 12px 16px;



  font-size: 14px; outline: none; transition: border 0.2s;



}







.chat-input:focus { border-color: #cbd5e0; }







.chat-send {



  width: 44px; height: 44px; border-radius: 50%;



  background: #cbd5e0; border: none;



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



  cursor: pointer; transition: background 0.2s;



}



.chat-send:hover { background: #a0aec0; }



.chat-send svg { width: 18px; height: 18px; fill: #fff; margin-left: -2px; }







@keyframes fadeIn {



  from { opacity: 0; transform: translateY(10px); }



  to { opacity: 1; transform: translateY(0); }



}



.split-feature, .ptab-content.active {



  animation: fadeIn 0.4s ease forwards;



}







@media (max-width: 900px) {



  nav { padding: 0 20px; }



  .nav-toggle { display: block; }



  .nav-links {



    display: none; position: absolute; top: 100%; left: 0; right: 0;



    background: #111827; flex-direction: column; padding: 20px; gap: 16px;



    box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-top: 1px solid var(--border);



  }



  .nav-links.open { display: flex; }



  .nav-links > .nav-item > a { color: #ffffff; font-size: 14px; }



  .dropdown { position: static; opacity: 1; pointer-events: all; box-shadow: none; border: none; transform: none; display: none; padding: 10px 0 0 16px; min-width: 0; background: transparent; }



  .nav-item.open .dropdown { display: block; }



  .dropdown a { text-align: left; padding: 8px 12px; color: #d1d5db; }



  .dropdown a:hover { color: #ffffff; }



  



  .hero-content { padding: 0 24px 72px; }



  .hero-right { display: none; }



  .pergola-split, .techos-header, .ventanas-top, .contact-inner { grid-template-columns: 1fr; }



  .techos-grid { grid-template-columns: 1fr; }



  .ventanas-showcase { grid-template-columns: 1fr; padding: 0 20px; }



  .v-sidebar { flex-direction: row; flex-wrap: wrap; }



  .v-main { aspect-ratio: 3/2; }



  .form-grid2 { grid-template-columns: 1fr; }



  .split-feature { grid-template-columns: 1fr; padding: 20px; }



  .ventanas-benefits { grid-template-columns: 1fr; margin: 2px 20px 0; }



  .vbenefit { border-right: none; border-bottom: 1px solid var(--border); }



  .vbenefit:last-child { border-bottom: none; }



  .pergolas-tabs, .pergolas-header, .techos-inner, .ventanas-inner, .ventanas-types-nav { padding-left: 20px; padding-right: 20px; }



  .brands { padding: 40px 20px; }



  .contact { padding: 64px 20px; }



  footer { padding: 28px 20px; flex-direction: column; text-align: center; }







  .puertas-top, .ventanas-top { gap: 20px; margin-bottom: 30px; padding: 0 20px; flex-direction: column; }



  .puertas-top > div, .ventanas-top > div { min-width: 100%; }



  



  /* Make sure split feature stacks */



  .split-feature { grid-template-columns: 1fr !important; padding: 24px !important; gap: 24px !important; }



  



  /* Fix top index tabs to scroll horizontally if they overflow */



  .ventanas-types-nav, .puertas-types-nav {



    flex-wrap: nowrap !important;



    overflow-x: auto;



    padding-bottom: 12px;



    -webkit-overflow-scrolling: touch;



  }



  .vtype-btn {



    white-space: nowrap;



    padding: 8px 14px;



    font-size: 9px;



  }



}







h1, h2, h3, h4, h5, .hero-h1, .sec-h, .sec-label, .sf-title, .form-title { font-family: 'Plus Jakarta Sans', sans-serif; }















img { image-rendering: -webkit-optimize-contrast; }











.marquee-wrapper { margin-top: 60px; width: 100%; overflow: hidden; background: #fafafa; padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }



.marquee { display: flex; width: max-content; animation: marquee 30s linear infinite; }



.marquee:hover { animation-play-state: paused; }



.marquee img { height: 44px; margin: 0 48px; object-fit: contain; max-width: 120px; }



@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }







.finance-strip { background: linear-gradient(135deg, rgba(179,18,29,0.85) 0%, rgba(50,0,0,0.95) 100%), url('./highres_imgs/portada_ai.webp') center/cover; color: white; padding: 30px 20px; text-align: center; }



.finance-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }



.finance-inner h3 { margin: 0; font-size: 28px; font-weight: 700; }



.finance-inner p { margin: 0; font-size: 16px; opacity: 0.9; font-family: 'Plus Jakarta Sans', sans-serif; }







.nav-logo img { height: 88px !important; max-height: 88px !important; width: auto; object-fit: contain; transition: filter 0.3s, transform 0.3s; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }







body.home .nav-logo img { height: 88px !important; max-height: 88px !important; width: auto; object-fit: contain; transition: filter 0.3s, transform 0.3s; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }







/* marquee img styling defined below */







nav.scrolled .nav-logo { background: transparent; padding: 0; }







.legal-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:99999; justify-content:center; align-items:center; }



.legal-modal.active { display:flex; }



.legal-modal-inner { background:#fff; width:90%; max-width:800px; max-height:80vh; overflow-y:auto; border-radius:12px; padding:40px; position:relative; font-family:'Plus Jakarta Sans', sans-serif; }



.legal-close { position:absolute; top:20px; right:20px; font-size:24px; cursor:pointer; font-weight:bold; color:var(--red); }



.legal-modal-inner h2 { font-family:'Plus Jakarta Sans', sans-serif; font-size:28px; margin-bottom:20px; }



.legal-modal-inner p { margin-bottom:15px; color:#444; line-height:1.6; }




/* ==========================================================================
   SOCIAL PROOF & TESTIMONIALS 
   ========================================================================== */

.social-proof-section {
  padding: 60px 24px 0 24px;
  background-color: #ffffff;
}

.sp-container {
  max-width: 1200px;
  margin: 0 auto;
}

.sp-banner {
  background: var(--surface);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 64px;
}

.sp-banner h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  color: var(--text);
  margin-bottom: 12px;
}

.sp-banner p {
  font-size: 18px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
}

.sp-banner svg {
  width: 28px;
  height: 28px;
}

.sp-header {
  text-align: center;
  margin-bottom: 48px;
}

.sp-header h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 36px;
  color: var(--text);
  margin-bottom: 8px;
}

.sp-header p {
  font-size: 18px;
  color: var(--text-light);
}



@media (min-width: 768px) {
  
}

@media (min-width: 1024px) {
  
  
}

.sp-card {
  background: #ffffff;
  width: 350px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}





.sp-stars {
  color: #FBBC05;
  font-size: 20px;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.sp-quote {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  color: var(--text);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 24px;
  flex-grow: 1;
}

.sp-author {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.sp-tag {
  display: inline-block;
  padding: 6px 12px;
  background: var(--surface);
  color: var(--text-light);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  align-self: flex-start;
  font-family: 'Plus Jakarta Sans', sans-serif;
}



.sp-cta-wrapper {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.sp-cta-wrapper p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  color: var(--text-light);
  margin-bottom: 32px;
  line-height: 1.6;
}

.sp-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

@media (min-width: 600px) {
  .sp-buttons {
    flex-direction: row;
  }
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.btn-whatsapp:hover {
  background: #1ebd5a;
  transform: translateY(-1px);
}

.sp-marquee {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  padding: 10px 0 40px 0;
}
.sp-marquee-track {
  display: flex;
  gap: 24px;
  animation: sp-scroll 80s linear infinite;
  padding-left: 24px;
}
.sp-marquee-track:hover {
  animation-play-state: paused;
}
@keyframes sp-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 12px)); }
}


/* ─── ENHANCED TYPOGRAPHY & DESTACADO ─── */


.spec-block-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--red) !important;
  margin-bottom: 12px !important;
}

.tab-desc, .tab-content p, .sec-p, .service-desc, .feature-text p {
  font-size: clamp(1.1rem, 1.3vw, 1.25rem) !important;
  line-height: 1.7 !important;
  color: #444444 !important;
}

.badge-led {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fff3cd !important;
  color: #856404 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid #ffeeba !important;
  margin-top: 10px !important;
}


/* ─── SECTION HEADERS RIGHT ALIGNMENT ─── */
.pergolas-header, .ventanas-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  margin-bottom: 40px !important;
}

.pergolas-header .sec-p, .ventanas-top .sec-p, .pergolas-header p, .ventanas-top p {
  text-align: right !important;
  margin-left: auto !important;
  max-width: 540px !important;
}

/* Equalize description text under h3 across all sub-sections to match Cortinas de Cristal */
.pergola-info > p:first-of-type, .tab-desc, .ventanas-showcase .pergola-info > p:first-of-type {
  font-size: clamp(1.125rem, 1.35vw, 1.25rem) !important;
  line-height: 1.75 !important;
  color: #333333 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 400 !important;
  margin-bottom: 20px !important;
}


/* ─── SECTION HEADERS VERTICAL STACKING ─── */
.pergolas-header, .ventanas-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  margin-bottom: 40px !important;
  gap: 8px !important;
}

.sec-label {
  display: block !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
}

.sec-h {
  text-align: left !important;
  margin-bottom: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.pergolas-header .sec-p, .ventanas-top .sec-p, .pergolas-header p, .ventanas-top p, .sec-p { 
  font-family: 'Plus Jakarta Sans', sans-serif !important; 
  font-size: 20.5px !important; 
  font-weight: 400 !important; 
  color: #1f2937 !important; 
  line-height: 1.75 !important; 
  text-align: center !important; 
  margin: 0 auto 36px !important; 
  max-width: 840px !important; 
  display: block !important; 
}

/* ─── UNIFIED HIGH-READABILITY TYPOGRAPHY FOR MATURE AUDIENCE (CALIBRATED WITH OLD SITE) ─── */
.tab-desc, 
.pergola-info > p, 
.ventanas-showcase .pergola-info > p, 
.feature-text, 
.feature-text h5, 
.feature-text p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.tab-desc, 
.pergola-info > p:first-of-type,
.pergola-info p {
  font-size: 18.5px !important;
  line-height: 1.75 !important;
  color: #1f2937 !important;
  font-weight: 400 !important;
  margin-bottom: 24px !important;
}

.feature-text h5 {
  font-size: 19.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}

.feature-text p {
  font-size: 17.5px !important;
  font-weight: 400 !important;
  color: #374151 !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

/* CAROUSEL / SLIDER STYLES */
.carousel-wrap { position: relative; width: 100%; height: 100%; min-height: 100%; overflow: hidden; }

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s, transform 0.2s;
  backdrop-filter: blur(4px);
}

.carousel-arrow:hover {
  background: rgba(168, 17, 39, 0.85);
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.carousel-dot.active {
  background: #a81127;
  transform: scale(1.3);
}

/* ALINEACIÓN PERFECTA VALLAS EXTERIOR (CENTRADAS EN LUGAR DE CORTADAS A LA DERECHA) */
.vallas-img-custom {
  object-position: left center !important;
}


/* GENERAL SHOWCASE CARDS (FLEXIBLE & LEGIBLE FOR TECHOS, VENTANAS, PUERTAS) */
.pergola-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 560px;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
  box-sizing: border-box;
}

.pergola-img-wrap,
.carousel-wrap {
  position: relative;
  overflow: hidden;
  display: flex;
  height: 100%;
  width: 100%;
}

.pergola-img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: filter 0.5s, transform 0.6s;
  display: block;
}

.pergola-info {
  background: var(--dark);
  padding: 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--border);
  box-sizing: border-box;
}

.pergola-info h2,
.pergola-info h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(28px, 3.2vw, 38px) !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

.pergola-info p.tab-desc,
.pergola-info p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18.5px !important;
  color: #1f2937 !important;
  line-height: 1.75 !important;
  margin-bottom: 24px !important;
}

.feature-list {
  margin-bottom: 28px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.feature-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid rgba(200,16,46,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  margin-top: 2px;
}

.feature-text h5 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 19.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}

.feature-text p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 17.5px !important;
  line-height: 1.7 !important;
  color: #374151 !important;
  margin-bottom: 0 !important;
}

/* UNIFIED 100% IDENTICAL FORMAT ACROSS ALL PERGOLA SHOWCASE CARDS */


/* ==========================================================================
   MOBILE SHOWCASE CARDS FIX (.pergola-split, .ventanas-showcase)
   ========================================================================== */
@media (max-width: 991px) {
  /* Removed max-height on .pergola-split / .ventanas-showcase */

  .ventanas-showcase[style*="display:none"],
  .ventanas-showcase[style*="display: none"] {
    display: none !important;
  }

  .pergola-img-wrap,
  .carousel-wrap,
  .pergolas .pergola-img-wrap,
  .pergolas .carousel-wrap {
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    position: relative !important;
  }

  .pergola-img,
  .pergolas .pergola-img,
  .carousel-slide img {
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .carousel-slide {
    height: 280px !important;
  }

  .pergola-info,
  .pergolas .pergola-info {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 24px 20px !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    box-sizing: border-box !important;
  }

  .pergola-info h3 {
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }

  .pergola-info p.tab-desc,
  .pergola-info p {
    font-size: 17px !important;
    line-height: 1.65 !important;
    color: #1f2937 !important;
    margin-bottom: 18px !important;
  }

  .feature-list {
    margin-bottom: 22px !important;
  }

  .feature-item {
    padding: 10px 0 !important;
    gap: 12px !important;
  }

  .feature-text h5 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: #111827 !important;
  }

  .feature-text p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #374151 !important;
  }
}


/* SECTION HEADER CENTERING AND UNIFICATION */
.pergolas-header, .techos-inner, .ventanas-top, .puertas-top {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.sec-label {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sec-h {
  text-align: center !important;
}

/* ─── SECTION LABEL PERFECTLY CENTERED OVER TITLE WORDS ─── */
.sec-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  margin-bottom: 18px !important;
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sec-label::before,
.sec-label::after {
  content: '' !important;
  width: 24px !important;
  height: 1px !important;
  background: var(--red) !important;
  display: inline-block !important;
}


/* ==========================================================================
   MOBILE & TOUCH ENHANCEMENTS (NAVBAR, TABS, INPUTS & ZERO-ZOOM IOS)
   ========================================================================== */

/* Nav Arrow for touch dropdown */
.nav-arrow {
  display: inline-block;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 4px;
  transition: transform 0.2s ease;
}
.nav-item.open .nav-arrow {
  transform: rotate(180deg);
  color: var(--gold, #c5a880);
}

@media (max-width: 991px) {
  /* Prevent iOS Safari automatic zoom on inputs */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Nav Links Drawer */
  .nav-links {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 8px;
  }

  .nav-item > a {
    flex: 1;
    padding: 8px 0;
    font-size: 15px !important;
  }

  .nav-item .dropdown {
    width: 100%;
    padding-left: 12px !important;
    margin-top: 4px;
  }

  /* Horizontal Tabs Smooth Touch Scroll */
  .pergolas-tabs,
  .ventanas-types-nav,
  .puertas-types-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 16px 16px !important;
    gap: 10px !important;
  }

  .pergolas-tabs::-webkit-scrollbar,
  .ventanas-types-nav::-webkit-scrollbar,
  .puertas-types-nav::-webkit-scrollbar {
    display: none !important;
  }

  .ptab,
  .vtype-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    padding: 10px 18px !important;
  }

  /* Floating WhatsApp Safe Margins */
  .floats {
    bottom: 20px !important;
    right: 20px !important;
    z-index: 999 !important;
  }

  /* Services Grid 4 cards responsive */
  .services > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
  }
}

/* Legal Modal Titles (replacing h2 to protect Topical Authority) */
.legal-modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 16px;
}


/* ─── ENLARGED SUBSECTION TABS & BADGES (SENIOR-ACCESSIBLE) ─── */
.ptab, .vtype-btn {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 14px 28px !important;
  border-radius: 40px !important;
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

.ptab.active, .vtype-btn.active {
  background: #be1620 !important;
  color: #ffffff !important;
  border-color: #be1620 !important;
  box-shadow: 0 6px 18px rgba(200,16,46,0.35) !important;
}

.ptab:hover:not(.active), .vtype-btn:hover:not(.active) {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.brands-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(32px, 3.8vw, 45px) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  text-align: center !important;
  margin: 64px 0 28px !important;
  line-height: 1.2 !important;
}

/* HIGH LEGIBILITY EXPLANATIONS */
.tab-desc, 
.pergola-info p, 
.ventana-info p,
.techos-info p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 19.5px !important;
  line-height: 1.8 !important;
  color: #1e293b !important;
  font-weight: 400 !important;
  margin-bottom: 24px !important;
}

.feature-text h5 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}

.feature-text p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #334155 !important;
  line-height: 1.7 !important;
}

/* SECTION TITLES & HERO UNIFIED */
h1, .hero-h1 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
}

h2, .sec-h {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.8px !important;
}

h3, h4, h5 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

@media (max-width: 768px) {
  .ptab, .vtype-btn {
    font-size: 16px !important;
    padding: 12px 22px !important;
  }
  .tab-desc, .pergola-info p, .ventana-info p, .techos-info p {
    font-size: 17.5px !important;
  }
  .brands-heading {
    font-size: 28px !important;
    margin: 48px 0 20px !important;
  }
}

/* ─── ARCHITECTURAL BLACK FOOTER (CALIBRATED WITH OLD SITE) ─── */
footer {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  padding: 44px 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

footer .footer-links a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

footer .footer-links a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

footer .footer-copy {
  color: rgba(255,255,255,0.55) !important;
  font-size: 15px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}


/* ==========================================================================
   SUPERIOR SCALE: LOGOS & FULL SITE TYPOGRAPHY BOOST (SENIOR ACCESSIBLE)
   ========================================================================== */

/* ─── 1. LOGOS ELEVATION ─── */
nav { height: 104px !important;
  padding: 0 48px !important;
}

.nav-logo img,
body.home .nav-logo img {
  height: 88px !important; max-height: 88px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)) !important;
}

.footer-logo img {
  height: 88px !important; max-height: 88px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ─── 2. BRAND LOGOS IN MARQUEE ─── */
.marquee-wrapper {
  padding: 48px 0 !important;
  background: #f8fafc !important;
}

.marquee img {
  height: 75px !important;
  max-height: 75px !important;
  max-width: 220px !important;
  margin: 0 44px !important;
  object-fit: contain !important;
  filter: grayscale(20%) contrast(110%) !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

.marquee img:hover {
  filter: grayscale(0%) contrast(120%) !important;
  transform: scale(1.1) !important;
}

/* Brand logos standardized below */

/* ─── 3. TOP NAVIGATION LINKS ─── */
.nav-links > .nav-item > a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

.nav-arrow {
  font-size: 14px !important;
  margin-left: 4px !important;
}

.dropdown a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 13px 22px !important;
}

.nav-cta {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 14px 28px !important;
  border-radius: 30px !important;
}

/* ─── 4. HERO SECTION ─── */
.hero-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

.hero-sub {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  max-width: 680px !important;
  margin-bottom: 40px !important;
}

.hero-btns a.btn-red,
.hero-btns a.btn-outline,
.btn-red {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 18px 38px !important;
  border-radius: 40px !important;
}

.hero-stat .n {
  font-size: 44px !important;
  font-weight: 800 !important;
}

.hero-stat .l {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ─── 5. TICKER ─── */
.ticker-item {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

.ticker-dot {
  width: 8px !important;
  height: 8px !important;
  margin: 0 20px !important;
}

/* ─── 6. SECTION LABELS & HEADINGS ("APARTADOS") ─── */
.sec-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #be1620 !important;
  margin-bottom: 12px !important;
}

.sec-p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #1e293b !important;
}

/* ─── 7. SOCIAL PROOF ─── */
.sp-banner h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.sp-banner p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.sp-header h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 38px !important;
  font-weight: 800 !important;
}

.sp-header p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 21px !important;
}

.sp-quote {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 19.5px !important;
  line-height: 1.65 !important;
  font-style: normal !important;
  color: #1e293b !important;
}

.sp-author {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.sp-tag {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ─── 8. SUBSECTION TABS (PTAB & VTYPE-BTN) ─── */
.pergolas-tabs,
.ventanas-types-nav,
.puertas-types-nav {
  gap: 12px !important;
  padding: 12px 52px !important;
}

.ptab, .vtype-btn {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 16px 34px !important;
  border-radius: 40px !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.ptab.active, .vtype-btn.active {
  background: #be1620 !important;
  color: #ffffff !important;
  border-color: #be1620 !important;
  box-shadow: 0 6px 20px rgba(200,16,46,0.35) !important;
}

.pergola-img-badge {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  padding: 8px 18px !important;
}

/* ─── 9. EXPLANATORY TEXT & PRODUCT SPECIFICATIONS ─── */
.tab-desc, 
.pergola-info p, 
.ventana-info p,
.techos-info p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.8 !important;
  color: #1e293b !important;
  font-weight: 400 !important;
  margin-bottom: 24px !important;
}

.feature-text h5 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

.feature-text p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18.5px !important;
  font-weight: 400 !important;
  color: #334155 !important;
  line-height: 1.75 !important;
}

/* ─── 10. FINANCE STRIP ─── */
.finance-strip {
  padding: 44px 24px !important;
}

.finance-inner h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
}

.finance-inner p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

/* ─── 11. CONTACT SECTION & FORMS ─── */
.contact-left p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  line-height: 1.75 !important;
  color: #334155 !important;
}

.cinfo {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.form-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

.form-row label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}

.contact-form-wrap input,
.contact-form-wrap select,
.contact-form-wrap textarea {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  padding: 16px 20px !important;
  border-radius: 8px !important;
}

/* ─── 12. FOOTER & TRUST BANNER ─── */
footer {
  padding: 50px 52px !important;
}

footer .footer-links a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 0 14px !important;
}

footer .footer-copy {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
}

/* ─── MOBILE ADAPTATION ─── */
@media (max-width: 991px) {
  nav { height: 84px !important;
    padding: 0 20px !important;
  }
  .nav-logo img,
  body.home .nav-logo img {
    height: 68px !important; max-height: 68px !important;
  }
  .footer-logo img {
    height: 68px !important; max-height: 68px !important;
  }
  .marquee img {
    height: 68px !important; max-height: 68px !important;
    margin: 0 28px !important;
  }
  .ptab, .vtype-btn {
    font-size: 16.5px !important;
    padding: 13px 24px !important;
  }
  .tab-desc, .pergola-info p, .ventana-info p, .techos-info p {
    font-size: 18.5px !important;
  }
  .hero-sub {
    font-size: 19px !important;
  }
}

/* --- SELLO INSTALADOR OFICIAL ROJO & FORMULARIO SIMPLIFICADO --- */
.sello-instalador-rojo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #be1620 !important;
  color: #ffffff !important;
  padding: 8px 22px !important;
  border-radius: 50px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 15px rgba(190, 22, 32, 0.35) !important;
  margin-bottom: 18px !important;
}
.sello-instalador-rojo svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
}
.trust-banner-nw {
  background-color: #0f172a !important;
  color: #ffffff !important;
  padding: 56px 24px !important;
  text-align: center !important;
}
.contact-form-wrap .form-grid2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 768px) {
  .contact-form-wrap .form-grid2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .nav-logo img, body.home .nav-logo img {
    height: 68px !important;
    max-height: 68px !important;
  }
  nav {
    height: 84px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA OFICIAL DE LA WEB ANTIGUA (PLAYFAIR DISPLAY SERIF)
   Exactamente como en la captura original solicitada por el usuario
   ══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5,
.hero-h1,
.sec-h,
.sec-h em,
.sec-p,
.pergolas-header .sec-p,
.pergolas-header p,
.ventanas-top .sec-p,
.ventanas-top p,
.pergola-info h2,
.pergola-info h3,
.pergola-info p,
.pergola-info p.tab-desc,
.tab-desc,
.pergola-info > p:first-of-type,
.ventanas-showcase .pergola-info > p:first-of-type,
.feature-text,
.feature-text h5,
.feature-text p,
.techo-name,
.techo-desc,
.v-main-label h3,
.v-main-label p,
.v-card-label .n,
.vbenefit-text h5,
.vbenefit-text p,
.form-title,
.sf-title,
.sf-desc,
.sp-banner h2,
.sp-header h3,
.sp-quote,
.sp-cta-wrapper p {
  font-family: 'Playfair Display', serif !important;
}

/* Tamaños y proporciones idénticas a la captura de la web antigua */
.sec-p {
  font-family: 'Playfair Display', serif !important;
  font-size: 19.5px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  line-height: 1.8 !important;
  text-align: center !important;
  margin: 0 auto 32px !important;
  max-width: 820px !important;
  display: block !important;
}

.pergola-info h2,
.pergola-info h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(26px, 3.2vw, 36px) !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 16px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

.tab-desc,
.pergola-info p,
.pergola-info > p:first-of-type {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.15rem, 1.4vw, 1.3rem) !important;
  line-height: 1.75 !important;
  color: #2c2c2c !important;
  font-weight: 400 !important;
  margin-bottom: 22px !important;
}

.feature-text h5 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-right: 6px !important;
  display: inline !important;
}

.feature-text p {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: #444444 !important;
  line-height: 1.65 !important;
  display: inline !important;
}

.feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   OPCIÓN A: FONDO BLANCO PURO FLOTANTE CON SOMBRA SUAVE (LUXURY ARCHITECTURE)
   Sustitución de las cajas grises por tarjetas blancas arquitectónicas
   ══════════════════════════════════════════════════════════════════════════ */
.pergola-split,
.split-feature,
.ventanas-showcase {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  margin-bottom: 40px !important;
}

.pergola-split:hover,
.ventanas-showcase:hover {
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.09) !important;
}

.pergola-info {
  background: #ffffff !important;
  padding: 48px 44px !important;
  border-left: 1px solid #f0f2f5 !important;
  box-sizing: border-box !important;
}

.pergola-info h2,
.pergola-info h3 {
  color: #111827 !important;
  margin-bottom: 16px !important;
}

.pergola-info p,
.pergola-info p.tab-desc,
.tab-desc {
  color: #374151 !important;
  line-height: 1.75 !important;
}

.feature-text h5 {
  color: #111827 !important;
}

.feature-text p {
  color: #4b5563 !important;
}

@media (max-width: 991px) {
  .pergola-split,
  .ventanas-showcase {
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  }
  .pergola-info,
  .pergolas .pergola-info {
    background: #ffffff !important;
    border-left: none !important;
    border-top: 1px solid #f0f2f5 !important;
    padding: 28px 20px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   ESPECIFICACIONES TÉCNICAS INLINE (DESPLEGABLE LIMPIO SIN FONDOS AZULES)
   ══════════════════════════════════════════════════════════════════════════ */
.specs-accordion {
  margin: 16px 0 22px 0;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  padding: 10px 0;
  background: transparent !important;
}

.specs-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent !important;
  border: none !important;
  padding: 8px 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}

.specs-toggle-btn:hover .specs-toggle-title {
  color: var(--red, #be1620);
}

.specs-toggle-title {
  font-family: 'Playfair Display', serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.specs-toggle-chevron {
  font-size: 15px;
  font-weight: 700;
  color: var(--red, #be1620);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 8px;
}

.specs-toggle-btn[aria-expanded="true"] .specs-toggle-chevron {
  transform: rotate(180deg);
}

.specs-content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: transparent !important;
}

.specs-toggle-btn[aria-expanded="true"] + .specs-content-wrapper {
  grid-template-rows: 1fr;
}

.specs-content-inner {
  min-height: 0;
  padding-top: 14px;
  padding-bottom: 6px;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.spec-microcard {
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.spec-microcard-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red, #be1620);
  margin-bottom: 4px;
}

.spec-microcard-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.spec-microcard-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #4b5563 !important;
  margin: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* ══════════════════════════════════════════════════════════════════════════
   CALIBRACIONES SOLICITADAS POR EL USUARIO (TAMAÑO LOGO, RESEÑAS, 
   DESPLEGABLES, FOTOS UNIFORMES Y ARMONIZACIÓN DE COLOR FOOTER/COOKIES)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. LOGO PRINCIPAL GRANDE OFICIAL ─── */
nav {
  height: 108px !important;
  padding: 0 40px !important;
}

.nav-logo img,
body.home .nav-logo img {
  height: 94px !important;
  max-height: 94px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)) !important;
  transition: transform 0.25s ease !important;
}

.footer-logo img {
  height: 88px !important;
  max-height: 88px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ─── 2. RESEÑAS CON MAYOR TAMAÑO TIPOGRÁFICO ─── */
.sp-card {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
  padding: 34px !important;
  border-radius: 14px !important;
}

.sp-stars {
  font-size: 23px !important;
  letter-spacing: 3px !important;
  margin-bottom: 16px !important;
  color: #FBBC05 !important;
}

.sp-quote {
  font-family: 'Playfair Display', serif !important;
  font-size: 21.5px !important;
  line-height: 1.65 !important;
  font-style: italic !important;
  color: #1a1a1a !important;
  margin-bottom: 24px !important;
  font-weight: 500 !important;
}

.sp-author {
  font-family: 'Playfair Display', serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 12px !important;
}

.sp-tag {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
}

/* ─── 3. IGUALACIÓN DE COLOR GRIS CON NEGRO EN ZONA COOKIES / PRE-FOOTER ─── */
.trust-banner-nw {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  padding: 56px 24px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

footer {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-top: none !important;
  padding: 48px 52px !important;
}

/* ─── 4. TIPOGRAFÍA DE DESPLEGABLES Y ACORDEONES ─── */
.specs-toggle-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 19.5px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.specs-toggle-chevron {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #be1620 !important;
}

.spec-microcard-badge {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #be1620 !important;
  margin-bottom: 6px !important;
}

.spec-microcard-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}

.spec-microcard-desc {
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: #334155 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.dropdown a {
  font-family: 'Playfair Display', serif !important;
  font-size: 17.5px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
}

/* ─── 5. ALTURA UNIFORME DE FOTOS (TODAS MIDEN LO MISMO) ─── */
.pergola-split,
.ventanas-showcase {
  min-height: 580px !important;
  border-radius: 12px !important;
}

.pergola-img-wrap,
.carousel-wrap,
.ventanas-showcase .pergola-img-wrap,
.pergola-split .pergola-img-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 580px !important;
  max-height: 620px !important;
  position: relative !important;
  overflow: hidden !important;
}

.pergola-img,
.carousel-slide img,
.ventanas-showcase .pergola-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 580px !important;
  max-height: 620px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* ─── 6. MOBILE ADAPTATION ─── */
@media (max-width: 991px) {
  nav {
    height: 96px !important;
    padding: 0 20px !important;
  }
  .nav-logo img,
  body.home .nav-logo img {
    height: 82px !important;
    max-height: 82px !important;
  }
  .footer-logo img {
    height: 76px !important;
    max-height: 76px !important;
  }
  .sp-card {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    padding: 24px !important;
  }
  .sp-quote {
    font-size: 18.5px !important;
  }
  .sp-author {
    font-size: 17px !important;
  }
  .pergola-split,
  .ventanas-showcase {
    min-height: auto !important;
  }
  .pergola-img-wrap,
  .carousel-wrap,
  .pergolas .pergola-img-wrap,
  .pergolas .carousel-wrap,
  .ventanas-showcase .pergola-img-wrap,
  .pergola-split .pergola-img-wrap {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }
  .pergola-img,
  .pergolas .pergola-img,
  .carousel-slide img,
  .ventanas-showcase .pergola-img {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   SOLUCIÓN DEFINITIVA DE CERRAMIENTOS, TIPOGRAFÍAS Y DIMENSIONES
   (IGUALACIÓN CON PÉRGOLAS, ELIMINACIÓN DE INLINE H5/P, TABS STICKY Y NAV)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. NAVBAR SÓLIDO EN SUBPÁGINAS Y SCROLL ─── */
body:not(.home) nav,
/* Removed obsolete dark nav rule */

body.home nav {
  background: rgba(13, 13, 13, 0);
}
/* Removed obsolete dark nav rule */

@media (max-width: 768px) {
  .nav-logo img,
  body.home .nav-logo img {
    height: auto !important;
    max-height: 48px !important;
    max-width: 175px !important;
  }
  .nav-cta {
    display: none !important;
  }
}

/* ─── 2. PESTAÑAS STICKY (NO SE PIERDEN AL HACER SCROLL) ─── */
.pergolas-tabs,
.ventanas-types-nav,
.puertas-types-nav {
  position: sticky !important;
  top: 120px !important;
  z-index: 85 !important;
  background: #ffffff !important;
  padding: 14px 48px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

@media (max-width: 991px) {
  .pergolas-tabs,
  .ventanas-types-nav,
  .puertas-types-nav {
    top: 94px !important;
    padding: 10px 16px !important;
  }
}

/* ─── 3. CORRECCIÓN Y AUMENTO DE TIPOGRAFÍA EN PRODUCTOS Y CERRAMIENTOS ─── */
.tab-badge {
  display: inline-block !important;
  background: rgba(190, 22, 32, 0.08) !important;
  color: #be1620 !important;
  border: 1px solid rgba(190, 22, 32, 0.25) !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 14px !important;
}

.pergola-info {
  background: #ffffff !important;
  padding: 42px 42px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  border-left: 1px solid #f1f5f9 !important;
}

.pergola-info h2,
.pergola-info h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 3.2vw, 36px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  margin: 0 0 14px 0 !important;
}

.tab-desc,
.pergola-info p.tab-desc,
.pergola-info > p:first-of-type {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  line-height: 1.75 !important;
  color: #2b3544 !important;
  font-weight: 400 !important;
  margin-bottom: 22px !important;
}

/* ─── 4. CARACTERÍSTICAS TÉCNICAS (BLOQUE, NO INLINE SQUISHED) ─── */
.feature-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 20px 0 28px 0 !important;
}

.feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 15px 18px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin: 0 !important;
  transition: all 0.25s ease !important;
}

.feature-item:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

.feature-icon,
.f-dot {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: rgba(190, 22, 32, 0.08) !important;
  border: 1.5px solid rgba(190, 22, 32, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #be1620 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.f-dot::after {
  content: "✓" !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #be1620 !important;
}

.feature-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #be1620 !important;
  stroke-width: 2.2 !important;
}

.feature-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
}

.feature-text h5 {
  display: block !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.feature-text p {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 400 !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ─── 5. AJUSTE DE ALTURA DE FOTOS EXACTO A PÉRGOLAS (500px - 530px) ─── */
/* Removed max-height on .pergola-split / .ventanas-showcase */

.pergola-img-wrap,
.carousel-wrap,
.ventanas-showcase .pergola-img-wrap,
.pergola-split .pergola-img-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  max-height: 540px !important;
  position: relative !important;
  overflow: hidden !important;
}

.pergola-img,
.carousel-slide img,
.ventanas-showcase .pergola-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  max-height: 540px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

@media (max-width: 991px) {
  /* Removed max-height on .pergola-split / .ventanas-showcase */
  .pergola-img-wrap,
  .carousel-wrap,
  .pergolas .pergola-img-wrap,
  .pergolas .carousel-wrap,
  .ventanas-showcase .pergola-img-wrap,
  .pergola-split .pergola-img-wrap {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }
  .pergola-img,
  .pergolas .pergola-img,
  .carousel-slide img,
  .ventanas-showcase .pergola-img {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* ─── 6. TARJETAS DE SERVICIOS EN HOMEPAGE (EQUILIBRADAS COMO EN PÉRGOLAS) ─── */
.services .srv-card h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(23px, 2.3vw, 28px) !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.services .srv-card p {
  font-size: 16.5px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.6 !important;
  font-family: 'Playfair Display', serif !important;
  margin-bottom: 14px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   SOLUCIÓN DEFINITIVA MASTER V2.6: CERRAMIENTOS, DIMENSIONES, FONT Y COLOR
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. NAVBAR SÓLIDO EN SUBPÁGINAS Y SCROLL (NUNCA TRANSPARENTE) */
body:not(.home) nav,
body.page-cerramientos nav,
body.page-techos nav,
body.page-ventanas nav,
body.page-puertas nav,
body.page-pergolas nav,
/* Removed obsolete dark nav rule */

body.home nav {
  background: rgba(13, 13, 13, 0);
}
/* Removed obsolete dark nav rule */

/* 2. PESTAÑAS STICKY EN GRIS PIZARRA (#0f172a) - NUNCA DESAPARECEN AL HACER SCROLL */
.pergolas-tabs,
.ventanas-types-nav,
.puertas-types-nav {
  position: sticky !important;
  top: 84px !important;
  z-index: 100 !important;
  background: #0f172a !important;
  padding: 14px 48px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

@media (max-width: 991px) {
  .pergolas-tabs,
  .ventanas-types-nav,
  .puertas-types-nav {
    top: 70px !important;
    padding: 10px 16px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Botones de pestañas dentro de la barra sticky gris */
.ptab, 
.vtype-btn {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 12px 24px !important;
  border-radius: 40px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.ptab:hover:not(.active), 
.vtype-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.ptab.active, 
.vtype-btn.active {
  background: #be1620 !important;
  color: #ffffff !important;
  border-color: #be1620 !important;
  box-shadow: 0 4px 16px rgba(190, 22, 32, 0.45) !important;
}

/* 3. PARIDAD EXACTA DE DIMENSIONES DE FOTOS CON PÉRGOLAS (500px ESCRITORIO / 320px MÓVIL) */
.pergola-split,
/* Removed max-height on .ventanas-showcase */

.pergola-img-wrap,
.carousel-wrap,
.ventanas-showcase .pergola-img-wrap,
.pergola-split .pergola-img-wrap {
  width: 100% !important;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pergola-img,
.carousel-slide img,
.ventanas-showcase .pergola-img,
.pergola-img-wrap > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

@media (max-width: 991px) {
  /* Removed max-height on .pergola-split / .ventanas-showcase */
  .pergola-img-wrap,
  .carousel-wrap,
  .pergolas .pergola-img-wrap,
  .pergolas .carousel-wrap,
  .ventanas-showcase .pergola-img-wrap,
  .pergola-split .pergola-img-wrap {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }
  .pergola-img,
  .pergolas .pergola-img,
.carousel-slide img,
.ventanas-showcase .pergola-img,
.pergola-img-wrap > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
}

/* 4. TIPOGRAFÍAS DE GRAN TAMAÑO Y LEGIBILIDAD EN CAJAS BLANCAS Y DESPLEGABLES */
.tab-badge {
  display: inline-block !important;
  background: rgba(190, 22, 32, 0.08) !important;
  color: #be1620 !important;
  border: 1px solid rgba(190, 22, 32, 0.25) !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 14px !important;
}

.pergola-info {
  background: #ffffff !important;
  padding: 42px 42px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  border-left: 1px solid #f1f5f9 !important;
}

.pergola-info h2,
.pergola-info h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(26px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  margin: 0 0 14px 0 !important;
}

.tab-desc,
.pergola-info p.tab-desc,
.pergola-info > p:first-of-type {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  line-height: 1.75 !important;
  color: #1e293b !important;
  font-weight: 400 !important;
  margin-bottom: 22px !important;
}

/* Listado de características en cajas blancas */
.feature-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 20px 0 28px 0 !important;
}

.feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin: 0 !important;
  transition: all 0.25s ease !important;
}

.feature-item:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.feature-icon,
.f-dot {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  background: rgba(190, 22, 32, 0.08) !important;
  border: 1.5px solid rgba(190, 22, 32, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #be1620 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.f-dot::after {
  content: '✓' !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #be1620 !important;
}

.feature-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #be1620 !important;
  stroke-width: 2.2 !important;
}

.feature-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
}

.feature-text h5 {
  display: block !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.feature-text p {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 400 !important;
  color: #334155 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Acordeón de especificaciones técnicas y microtarjetas */
.specs-accordion {
  margin: 18px 0 24px 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 0 !important;
  background: transparent !important;
}

.specs-toggle-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 0 !important;
  cursor: pointer !important;
  text-align: left !important;
}

.specs-toggle-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 18.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.specs-toggle-chevron {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #be1620 !important;
  transition: transform 0.3s ease !important;
}

.specs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  padding-top: 14px !important;
}

.spec-microcard {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.spec-microcard-badge {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #be1620 !important;
  margin-bottom: 6px !important;
}

.spec-microcard-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}

.spec-microcard-desc {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: #334155 !important;
  margin: 0 !important;
}

/* 5. UNIFICACIÓN DE COLOR EN 'EL GRIS DE ARRIBA' (#0f172a) */
footer {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 50px 52px !important;
}

.trust-banner-nw {
  background-color: #0f172a !important;
  color: #ffffff !important;
  padding: 56px 24px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

footer .footer-links a {
  color: #e2e8f0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 0 14px !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

footer .footer-links a:hover {
  color: #be1620 !important;
}

footer .footer-copy {
  color: #94a3b8 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
}

/* Offset de anclas para Cerramientos y Productos */
#cerramientos,
#tab-cortinas-cristal,
#tab-zip-lona,
#tab-vallas-cristal,
.ptab-content,
.tab-panel {
  scroll-margin-top: 160px !important;
}


/* ══════════════════════════════════════════════════════════════
   DEFINITIVE OVERRIDES v3.5 — Applied 24 Sep 2026
   All rules use !important to guarantee they win the cascade
   ══════════════════════════════════════════════════════════════ */

/* 1. NAV — Transparent at top, ivory when scrolled */
nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-bottom 0.35s ease !important;
}

nav.scrolled {
  background: rgba(246, 244, 239, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Sub-pages (no .home): always solid ivory */
body:not(.home) nav {
  background: rgba(246, 244, 239, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Home at top: white nav links (over dark hero) */
/* neutralized */

/* Scrolled or subpage: dark nav links */
nav.scrolled .nav-links > .nav-item > a,
body:not(.home) nav .nav-links > .nav-item > a {
  color: #1a1a1a !important;
  text-shadow: none !important;
}

nav .nav-links > .nav-item > a:hover,
nav.scrolled .nav-links > .nav-item > a:hover {
  color: #be1620 !important;
}

nav .nav-toggle,
nav.scrolled .nav-toggle {
  color: #1a1a1a !important;
}

/* Home transparent nav: white hamburger */
body.home nav:not(.scrolled) .nav-toggle {
  color: #ffffff !important;
}

/* Logo: always original, no white patch */
.nav-logo,
nav.scrolled .nav-logo {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 2. DROPDOWN — Ivory marfil background */
.dropdown {
  background: #faf9f6 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08) !important;
}

.dropdown a {
  color: #334155 !important;
}

.dropdown a:hover {
  background: rgba(190, 22, 32, 0.06) !important;
  color: #be1620 !important;
}

/* 3. SR VISIBILITY — Never stay invisible */
.sr {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.sr.in {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Force-visible elements that should never be hidden */
h1, h2, h3, .sec-h, .sec-label, .sec-p,
.pergolas-header, .contact, .contact-left, .contact-form-wrap,
.brands-heading, .marquee-wrapper, .finance-strip, .trust-banner-nw {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 4. TAB BAR — Ivory sticky */
.pergolas-tabs,
.ventanas-types-nav,
.puertas-types-nav {
  background: #f7f6f2 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  gap: 12px !important;
  padding: 12px 32px !important;
  position: sticky !important;
  top: 84px !important;
  z-index: 90 !important;
}

.pergolas-tabs::-webkit-scrollbar,
.ventanas-types-nav::-webkit-scrollbar,
.puertas-types-nav::-webkit-scrollbar {
  display: none !important;
}

/* 5. TAB BUTTONS */
.ptab,
.vtype-btn {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 40px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.ptab:hover:not(.active),
.vtype-btn:hover:not(.active) {
  background: #f1f5f9 !important;
  color: #be1620 !important;
}

.ptab.active,
.vtype-btn.active {
  background: #be1620 !important;
  color: #ffffff !important;
  border-color: #be1620 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(190, 22, 32, 0.35) !important;
}

/* 6. TAB CONTENT VISIBILITY */
.ptab-content,
.tab-panel {
  display: none !important;
}

.ptab-content.active,
.tab-panel.active {
  display: block !important;
  animation: fadeIn 0.3s ease forwards;
}

.ventanas-showcase {
  display: none !important;
}

.ventanas-showcase.active {
  display: grid !important;
  animation: fadeIn 0.3s ease forwards;
}

.pergola-split.ventanas-showcase {
  display: none !important;
}

.pergola-split.ventanas-showcase.active {
  display: grid !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* 7. MARQUEE — Animated scrolling (NO transform:none) */
.marquee {
  display: flex !important;
  width: max-content !important;
  animation: marquee 30s linear infinite !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.marquee:hover {
  animation-play-state: paused !important;
}

.marquee-wrapper {
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 8. CTA NAV BUTTON */
.nav-cta,
nav.scrolled .nav-cta {
  background: #be1620 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 10px 24px !important;
  border: none !important;
}

/* 9. BRANDS HEADING */
.brands-heading {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  text-align: center !important;
  margin: 48px 0 24px !important;
  display: block !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   DEFINITIVE MASTER FIX v3.6 — TOTAL HARMONY (NAV, DROPDOWNS, SECTIONS, SPECS)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. NAVBAR TRANSPARENT AT TOP ON ALL PAGES, SOLID IVORY ON SCROLL ─── */
nav,
body.home nav,
body:not(.home) nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-bottom 0.35s ease, backdrop-filter 0.35s ease !important;
}

nav.scrolled,
body.home nav.scrolled,
body:not(.home) nav.scrolled {
  background: rgba(246, 244, 239, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Nav links color */
/* neutralized */

body:not(.home) nav:not(.scrolled) .nav-links > .nav-item > a,
nav.scrolled .nav-links > .nav-item > a,
body.home nav.scrolled .nav-links > .nav-item > a,
body:not(.home) nav.scrolled .nav-links > .nav-item > a {
  color: #1a1a1a !important;
  text-shadow: none !important;
}

nav .nav-links > .nav-item > a:hover,
nav.scrolled .nav-links > .nav-item > a:hover {
  color: #be1620 !important;
}

/* Nav toggle button */
body.home nav:not(.scrolled) .nav-toggle {
  color: #ffffff !important;
}
body:not(.home) nav:not(.scrolled) .nav-toggle,
nav.scrolled .nav-toggle {
  color: #1a1a1a !important;
}

/* Nav Logo */
.nav-logo,
nav.scrolled .nav-logo {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ─── 2. DROPDOWN MENUS (Ivory Marfil) ─── */
.dropdown {
  background: #faf9f6 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08) !important;
}
.dropdown a {
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.dropdown a:hover {
  background: rgba(190, 22, 32, 0.06) !important;
  color: #be1620 !important;
}

/* ─── 3. PRODUCT SHOWCASE LAYOUT — NEVER CUT OFF ─── */
.pergola-split,
.ventanas-showcase {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 40px auto 70px auto !important;
  max-width: 1200px !important;
  padding: 0 24px !important;
}

@media (max-width: 991px) {
  .pergola-split,
  .ventanas-showcase {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin: 30px auto 50px auto !important;
  }
}

.pergola-info {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* Image wrappers */
.pergola-img-wrap,
.carousel-wrap,
.ventanas-showcase .pergola-img-wrap,
.pergola-split .pergola-img-wrap {
  width: 100% !important;
  height: 480px !important;
  min-height: 480px !important;
  max-height: 560px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

@media (max-width: 991px) {
  .pergola-img-wrap,
  .carousel-wrap,
  .ventanas-showcase .pergola-img-wrap,
  .pergola-split .pergola-img-wrap {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 360px !important;
  }
}

.pergola-img-wrap > img,
.carousel-slide > img,
.ventanas-showcase .pergola-img-wrap > img,
.pergola-split .pergola-img-wrap > img,
img.pergola-img,
img.vallas-img-custom {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Partner logos inside product info (DOORGATE logo etc.) - NEVER ENLARGED */
.pergola-info img,
.pergola-info div > img {
  width: auto !important;
  max-width: 170px !important;
  height: auto !important;
  max-height: 55px !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: inline-block !important;
  margin: 12px 0 20px 0 !important;
}

/* ─── 4. ESPECIFICACIONES TÉCNICAS FIJAS Y ACCIONABLES ─── */
.specs-accordion {
  margin: 20px 0 24px 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  background: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.specs-toggle-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: none !important;
  user-select: none !important;
}

.specs-toggle-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.specs-toggle-chevron {
  display: inline-block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #be1620 !important;
  transition: transform 0.3s ease !important;
  transform: rotate(180deg) !important;
}

.specs-toggle-btn[aria-expanded="false"] .specs-toggle-chevron {
  transform: rotate(0deg) !important;
}

.specs-content-wrapper {
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease !important;
}

.specs-toggle-btn[aria-expanded="false"] + .specs-content-wrapper {
  display: none !important;
}

.specs-content-inner {
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 8px 0 !important;
}

.specs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}

.spec-microcard {
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.spec-microcard-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #be1620 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.spec-microcard-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 4px !important;
}

.spec-microcard-desc {
  font-size: 12.5px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* ─── 5. MARCAS MARQUEE — FLUID ANIMATION ─── */
.brands-heading {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  text-align: center !important;
  margin: 60px 0 24px 0 !important;
  display: block !important;
  clear: both !important;
}

.marquee-wrapper {
  width: 100% !important;
  overflow: hidden !important;
  background: #fafafa !important;
  padding: 36px 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 40px !important;
}

.marquee {
  display: flex !important;
  width: max-content !important;
  animation: marquee 30s linear infinite !important;
}

.marquee:hover {
  animation-play-state: paused !important;
}

.marquee img {
  height: 48px !important;
  max-height: 48px !important;
  margin: 0 44px !important;
  object-fit: contain !important;
  max-width: 175px !important;
  width: auto !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

.marquee img[src*="rehau"] {
  height: 52px !important;
  max-height: 52px !important;
  transform: scale(1.15) !important;
}

.marquee img:hover {
  transform: scale(1.08) !important;
}

.marquee img[src*="rehau"]:hover {
  transform: scale(1.22) !important;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── 6. TAB BUTTONS & CONTENT ─── */
.ptab-content,
.tab-panel {
  display: none !important;
}

.ptab-content.active,
.tab-panel.active {
  display: block !important;
}

.ventanas-showcase {
  display: none !important;
}

.ventanas-showcase.active {
  display: grid !important;
}

.ptab,
.vtype-btn {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 40px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.ptab.active,
.vtype-btn.active {
  background: #be1620 !important;
  color: #ffffff !important;
  border-color: #be1620 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(190, 22, 32, 0.35) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   DEFINITIVE SHOWCASE CARDS v3.7 — PREMIUM FULL-WIDTH & PROPORTIONAL
   ══════════════════════════════════════════════════════════════════════════ */

/* Center the tab buttons elegantly */
.pergolas-tabs,
.ventanas-types-nav,
.puertas-types-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 24px !important;
  background: #f7f6f2 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  position: sticky !important;
  top: 84px !important;
  z-index: 90 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

@media (max-width: 768px) {
  .pergolas-tabs,
  .ventanas-types-nav,
  .puertas-types-nav {
    justify-content: flex-start !important;
    padding: 12px 16px !important;
  }
}

/* Showcase Cards: Elegant, proportional, full-width utilization */
.pergola-split,
.ventanas-showcase {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  align-items: stretch !important; /* Left photo and right info match 100% in height */
  width: calc(100% - 96px) !important;
  max-width: 1440px !important;
  margin: 36px auto 60px auto !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important; /* Image cleanly clipped to card's rounded corners */
  min-height: 560px !important;
  height: auto !important;
  max-height: none !important;
}

@media (max-width: 1024px) {
  .pergola-split,
  .ventanas-showcase {
    grid-template-columns: 1fr !important;
    width: calc(100% - 32px) !important;
    margin: 24px auto 40px auto !important;
    border-radius: 12px !important;
  }
}

/* Left Column: Image wrapper fills 100% of left half top-to-bottom */
.pergola-img-wrap,
.carousel-wrap,
.ventanas-showcase .pergola-img-wrap,
.pergola-split .pergola-img-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}

@media (max-width: 1024px) {
  .pergola-img-wrap,
  .carousel-wrap,
  .ventanas-showcase .pergola-img-wrap,
  .pergola-split .pergola-img-wrap {
    min-height: 380px !important;
    height: 380px !important;
    max-height: 420px !important;
  }
}

/* Photos inside left column cover the entire space smoothly */
.pergola-img-wrap > img,
.carousel-slide > img,
.ventanas-showcase .pergola-img-wrap > img,
.pergola-split .pergola-img-wrap > img,
img.pergola-img,
img.vallas-img-custom {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.pergola-img-wrap:hover img.pergola-img {
  transform: scale(1.02) !important;
}

/* Right Column: Info block with generous padding and centered content */
.pergola-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 44px 52px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .pergola-info {
    padding: 32px 24px !important;
  }
}

.pergola-info h2,
.pergola-info h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #1a1a1a !important;
  margin-bottom: 12px !important;
}

.pergola-info .tab-desc,
.pergola-info p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  margin-bottom: 18px !important;
}

/* Compact, elegant feature items */
.feature-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 14px 0 24px 0 !important;
}

.feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.feature-item:hover {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
}

.feature-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(190, 22, 32, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.feature-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #be1620 !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.feature-text {
  flex: 1 !important;
}

.feature-text h5 {
  font-family: 'Playfair Display', serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.3 !important;
}

.feature-text p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Callout banner below product (like "¿Deseas cerrar los laterales?") */
.ptab-content > div[style*="border-left"] {
  width: calc(100% - 96px) !important;
  max-width: 1440px !important;
  margin: 32px auto 48px auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .ptab-content > div[style*="border-left"] {
    width: calc(100% - 32px) !important;
  }
}

.pergola-info .btn-red {
  align-self: flex-start !important;
  padding: 14px 30px !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 4px !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   GRAND FULL-WIDTH SHOWCASE v4.2 (UNIFIED PROPORTIONS & REALISTIC SIZING)
   ══════════════════════════════════════════════════════════════════════════ */

/* The showcase container spans the FULL screen width edge-to-edge */
.ptab-content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pergola-split,
.ventanas-showcase {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 60px 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  min-height: 750px !important;
  max-height: 800px !important;
  height: 780px !important;
  gap: 0 !important;
}

@media (max-width: 991px) {
  .pergola-split,
  .ventanas-showcase {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    gap: 0 !important;
  }
}

/* Left side photo: flush edge-to-edge, uniform height across all tabs without excessive cropping */
.pergola-img-wrap,
.carousel-wrap,
.ventanas-showcase .pergola-img-wrap,
.pergola-split .pergola-img-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 750px !important;
  max-height: 800px !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
}

@media (max-width: 991px) {
  .pergola-img-wrap,
  .carousel-wrap,
  .ventanas-showcase .pergola-img-wrap,
  .pergola-split .pergola-img-wrap {
    min-height: 380px !important;
    height: 380px !important;
    max-height: 380px !important;
    width: 100% !important;
  }
}

.pergola-img-wrap > img,
.carousel-slide > img,
.ventanas-showcase .pergola-img-wrap > img,
.pergola-split .pergola-img-wrap > img,
img.pergola-img,
img.vallas-img-custom {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.6s ease !important;
}

.pergola-img-wrap:hover img.pergola-img {
  transform: scale(1.02) !important;
}

/* Red badge on top-left of the photo */
.pergola-img-badge {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  background: #be1620 !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 2px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  z-index: 5 !important;
}

/* Right side info column: generous padding and elegant typography */
.pergola-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 40px 48px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 100% !important;
  border-left: none !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.pergola-info::-webkit-scrollbar {
  display: none !important;
}

@media (max-width: 1280px) {
  .pergola-info {
    padding: 32px 36px !important;
  }
}

@media (max-width: 991px) {
  .pergola-info {
    padding: 32px 24px !important;
    border-left: none !important;
  }
}

.pergola-info h2,
.pergola-info h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(25px, 2.3vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #1a1a1a !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.3px !important;
}

.pergola-info .tab-desc,
.pergola-info p {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(15px, 1.05vw, 16.5px) !important;
  line-height: 1.55 !important;
  color: #334155 !important;
  margin-bottom: 14px !important;
}

/* Feature list: elegant rows with round red outline icons and inline text */
.feature-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 8px 0 16px 0 !important;
}

.feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.feature-item:last-child {
  border-bottom: none !important;
}

.feature-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border: 1px solid rgba(190, 22, 32, 0.4) !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

.feature-icon svg {
  width: 13px !important;
  height: 13px !important;
  stroke: #be1620 !important;
  fill: none !important;
  stroke-width: 1.6 !important;
}

.feature-text {
  flex: 1 !important;
  line-height: 1.5 !important;
}

.feature-text h5 {
  display: inline !important;
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(15px, 1.05vw, 16.5px) !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-right: 6px !important;
}

.feature-text p {
  display: inline !important;
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(14px, 1.0vw, 15.5px) !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* Tag pills */
.pergola-info div[style*="display:flex"] span {
  font-size: 14px !important;
  padding: 5px 12px !important;
}

/* Call to action button */
.pergola-info .btn-red,
.pergola-info a.btn-red {
  align-self: flex-start !important;
  padding: 13px 32px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: #be1620 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(190, 22, 32, 0.3) !important;
  margin-top: 10px !important;
  transition: all 0.2s ease !important;
}

.pergola-info .btn-red:hover,
.pergola-info a.btn-red:hover {
  background: #d41824 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(190, 22, 32, 0.4) !important;
}

/* Banner "¿Deseas cerrar los laterales?" */
.ptab-content > div[style*="border-left"] {
  width: calc(100% - 96px) !important;
  max-width: 1400px !important;
  margin: 40px auto 48px auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 991px) {
  .ptab-content > div[style*="border-left"] {
    width: calc(100% - 32px) !important;
  }
}

/* Enlarge WhatsApp floating button */
.floats {
  bottom: 32px !important;
  right: 32px !important;
  z-index: 9999 !important;
}

.float-btn,
.fw {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #25D366 !important;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.float-btn:hover,
.fw:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 10px 32px rgba(37, 211, 102, 0.6) !important;
}

.float-btn svg,
.fw svg {
  width: 38px !important;
  height: 38px !important;
  fill: #ffffff !important;
}

@media (max-width: 768px) {
  .floats {
    bottom: 20px !important;
    right: 20px !important;
  }
  .float-btn,
  .fw {
    width: 60px !important;
    height: 60px !important;
  }
  .float-btn svg,
  .fw svg {
    width: 34px !important;
    height: 34px !important;
  }
}

/* ==========================================================================
   MOBILE & RESPONSIVE DEFINITIVE OVERHAUL (v4.3)
   - Paso 1: Tipografia Responsiva (clamp fluido y prevencion de colisiones)
   - Paso 2: Menu Desplegable Movil (overflow vertical, accordion real sin recuadros blancos)
   - Paso 3: Ajuste de Espaciados en Tarjetas (padding compacto, botones fluidos)
   - Paso 4: Control de Elementos Flotantes (WhatsApp ergonomico sin tapar CTAs)
   ========================================================================== */

/* Top Navigation Bar on Mobile */
@media (max-width: 991px) {
  nav {
    padding: 0 16px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    background: #0f172a !important;
  }

  .nav-logo {
    display: flex !important;
    align-items: center !important;
  }

  .nav-logo img {
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .nav-cta {
    display: none !important;
  }

  .nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 8px !important;
    margin-left: auto !important;
    z-index: 10001 !important;
  }

  .nav-toggle svg {
    width: 28px !important;
    height: 28px !important;
    stroke: #ffffff !important;
  }

  /* Paso 2: Contenedor del Menu Movil con overflow y scroll fluido */
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #0b1120 !important;
    flex-direction: column !important;
    padding: 16px 20px 80px 20px !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
    z-index: 99999 !important;
  }

  .nav-links.open {
    display: flex !important;
  }

  .nav-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 0 !important;
    position: relative !important;
  }

  .nav-links > .nav-item > a,
  body.home .nav-links > .nav-item > a,
  body:not(.home) nav .nav-links > .nav-item > a,
  body:not(.home) nav:not(.scrolled) .nav-links > .nav-item > a {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
    flex: 1 !important;
  }

  .nav-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    color: #94a3b8 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: transform 0.25s ease, color 0.2s ease !important;
    user-select: none !important;
  }

  .nav-item.open > .nav-arrow {
    transform: rotate(180deg) !important;
    color: #ffffff !important;
  }

  /* Paso 2: Submenu Desplegable Acordeon dentro del menu movil */
  .nav-links .dropdown,
  .nav-item .dropdown,
  .dropdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
    padding: 6px 8px !important;
    margin: 6px 0 8px 0 !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  .nav-item.open .dropdown {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .nav-links .dropdown a,
  .nav-item .dropdown a,
  .dropdown a {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: block !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .nav-links .dropdown a:hover,
  .nav-item .dropdown a:hover,
  .dropdown a:hover,
  .nav-links .dropdown a:active,
  .nav-item .dropdown a:active {
    background: rgba(190, 22, 32, 0.25) !important;
    color: #ffffff !important;
  }

  /* Paso 3: Ajuste de Espaciados en Tarjetas y Contenedores */
  .pergola-split {
    grid-template-columns: 1fr !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 auto 28px auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  }

  .pergola-img-wrap,
  .pergola-img {
    height: clamp(240px, 56vw, 300px) !important;
    min-height: clamp(240px, 56vw, 300px) !important;
    width: 100% !important;
  }

  .pergola-img-wrap img,
  .pergola-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .pergola-info {
    padding: 22px 18px 26px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pergola-info h2 {
    font-size: clamp(20px, 5.5vw, 25px) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .pergola-info > p,
  .tab-desc {
    font-size: 14px !important;
    line-height: 1.48 !important;
    margin-bottom: 16px !important;
  }

  .pergola-info div[style*="display:flex"] {
    gap: 6px !important;
    margin-bottom: 16px !important;
  }
  .pergola-info div[style*="display:flex"] span {
    font-size: 12.5px !important;
    padding: 5px 10px !important;
  }

  .pergola-features {
    gap: 8px !important;
    margin-bottom: 18px !important;
  }
  .feature-item,
  .pergola-features > div {
    padding: 8px 10px !important;
  }
  .feature-text h5 {
    font-size: 14.5px !important;
  }
  .feature-text p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .pergola-info .btn-red,
  .pergola-info a.btn-red {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
  }

  .brands-section {
    padding: 32px 16px !important;
  }
  .brands-title {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    margin-bottom: 20px !important;
  }
}

/* Paso 1: Tipografia Responsiva y Correccion de Portada en Movil */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh !important;
    height: auto !important;
    padding-top: 80px !important;
    align-items: flex-end !important;
  }

  .hero-content {
    padding: 16px 20px 48px 20px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .hero-eyebrow {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    margin-bottom: 12px !important;
  }

  .hero-h1 {
    font-size: clamp(32px, 8.4vw, 36px) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 14px !important;
  }

  .hero-sub {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 22px !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
  }

  /* Subpage Headers */
  .pergolas {
    padding-top: 92px !important;
  }

  .pergolas-header {
    margin-bottom: 20px !important;
    padding: 0 16px !important;
  }

  .sec-label {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    margin-bottom: 8px !important;
  }

  .sec-h, h1.sec-h {
    font-size: clamp(23px, 6.2vw, 30px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 10px !important;
  }

  .sec-p {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
  }

  .pergolas-tabs,
  .ventanas-types-nav,
  .puertas-types-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 16px 14px 16px !important;
    gap: 8px !important;
  }

  .pergolas-tabs::-webkit-scrollbar,
  .ventanas-types-nav::-webkit-scrollbar,
  .puertas-types-nav::-webkit-scrollbar {
    display: none !important;
  }

  .ptab, .type-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    padding: 10px 18px !important;
  }

  /* Paso 4: Control del Boton Flotante de WhatsApp en Movil */
  .floats {
    bottom: 16px !important;
    right: 16px !important;
    z-index: 9998 !important;
  }

  .float-btn,
  .fw {
    width: 50px !important;
    height: 50px !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4) !important;
  }

  .float-btn svg,
  .fw svg {
    width: 26px !important;
    height: 26px !important;
  }

  .float-tip {
    display: none !important;
  }

  .float-pulse::before,
  .float-pulse::after {
    display: none !important;
  }
}

/* ==========================================================================
   DEFINITIVE TYPOGRAPHY & RESPONSIVE CALIBRATIONS (v4.4)
   ========================================================================== */

/* ─── 1. RESTORE GENEROUS, PRESTIGIOUS DESKTOP TYPOGRAPHY (>= 992px) ─── */
@media (min-width: 992px) {
  /* Main section headers */
  .sec-h, h1.sec-h {
    font-size: clamp(38px, 4.2vw, 54px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;
  }

  .sec-p {
    font-size: clamp(17.5px, 1.25vw, 20.5px) !important;
    line-height: 1.7 !important;
    max-width: 880px !important;
    color: #334155 !important;
  }

  /* Product card title */
  .pergola-info h2,
  .pergola-info h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(32px, 3.0vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #1a1a1a !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.4px !important;
  }

  /* Product card description */
  .pergola-info .tab-desc,
  .pergola-info p {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(17px, 1.2vw, 19.5px) !important;
    line-height: 1.75 !important;
    color: #334155 !important;
    margin-bottom: 22px !important;
  }

  /* Feature list items */
  .feature-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 8px 0 20px 0 !important;
  }

  .feature-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: transparent !important;
  }

  .feature-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border: 1px solid rgba(190, 22, 32, 0.35) !important;
    border-radius: 50% !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
  }

  .feature-icon svg {
    width: 15px !important;
    height: 15px !important;
    stroke: #be1620 !important;
    stroke-width: 1.6 !important;
  }

  .feature-text h5 {
    display: inline !important;
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(17px, 1.2vw, 19.5px) !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-right: 8px !important;
    line-height: 1.6 !important;
  }

  .feature-text p {
    display: inline !important;
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(15.5px, 1.1vw, 18px) !important;
    color: #475569 !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    margin: 0 !important;
  }

  /* Tag pills */
  .pergola-info div[style*="display:flex"] span {
    font-size: 15px !important;
    padding: 6px 14px !important;
  }

  /* CTA button */
  .pergola-info .btn-red,
  .pergola-info a.btn-red {
    font-size: 14px !important;
    padding: 15px 36px !important;
    letter-spacing: 2px !important;
    margin-top: 14px !important;
  }
}

/* ─── 2. MOBILE MENU TEXT COLOR FIX (ALWAYS WHITE ON ALL PAGES & SCROLL STATES) ─── */
@media (max-width: 991px) {
  nav .nav-links,
  nav.scrolled .nav-links,
  body.home nav .nav-links,
  body.home nav.scrolled .nav-links,
  body:not(.home) nav .nav-links,
  body:not(.home) nav.scrolled .nav-links {
    background: #0b1120 !important;
  }

  nav .nav-links > .nav-item > a,
  nav.scrolled .nav-links > .nav-item > a,
  body.home nav .nav-links > .nav-item > a,
  body.home nav.scrolled .nav-links > .nav-item > a,
  body:not(.home) nav .nav-links > .nav-item > a,
  body:not(.home) nav.scrolled .nav-links > .nav-item > a,
  .nav-links a {
    color: #111827 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-arrow,
  nav .nav-arrow,
  nav.scrolled .nav-arrow {
    color: #94a3b8 !important;
  }

  .nav-item.open > .nav-arrow {
    color: #ffffff !important;
  }

  .nav-links .dropdown a,
  .nav-item .dropdown a,
  .dropdown a {
    color: #cbd5e1 !important;
  }

  .nav-links .dropdown a:hover,
  .nav-item .dropdown a:hover,
  .dropdown a:hover {
    color: #ffffff !important;
  }
}

/* ─── 3. HOME SERVICE CARDS (SRV-CARD) MOBILE OVERHAUL ─── */
@media (max-width: 768px) {
  .srv-card {
    aspect-ratio: auto !important;
    min-height: 480px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  }

  .srv-card .srv-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
  }

  /* Deep rich gradient backdrop so text is always 100% readable and never collides with image */
  .srv-card > div[style*="linear-gradient"],
  .srv-card > div:nth-child(2) {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(11, 17, 32, 0.98) 0%, rgba(11, 17, 32, 0.88) 55%, rgba(11, 17, 32, 0.5) 80%, rgba(11, 17, 32, 0.25) 100%) !important;
    z-index: 1 !important;
  }

  .srv-card > div[style*="bottom: 0"],
  .srv-card > div:nth-child(3) {
    position: relative !important;
    bottom: auto !important;
    padding: 24px 20px 28px 20px !important;
    z-index: 2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .srv-card span[style*="color:var(--red)"] {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 8px !important;
    background: rgba(190, 22, 32, 0.2) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(190, 22, 32, 0.4) !important;
    color: #be1620 !important;
    display: inline-block !important;
    font-weight: 700 !important;
  }

  .srv-card h3 {
    font-size: clamp(21px, 5.5vw, 25px) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  .srv-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    color: #cbd5e1 !important;
  }

  .srv-card div[style*="display: flex"] {
    font-size: 13.5px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
  }
}

/* ─── 4. TABLET OPTIMIZATIONS (768px - 1024px) ─── */
@media (min-width: 769px) and (max-width: 1024px) {
  nav {
    padding: 0 24px !important;
  }

  .pergolas {
    padding-top: 110px !important;
  }

  .sec-h, h1.sec-h {
    font-size: clamp(32px, 3.8vw, 42px) !important;
  }

  .pergola-split {
    grid-template-columns: 1fr !important;
    max-width: 720px !important;
    margin: 0 auto 36px auto !important;
  }

  .pergola-img-wrap,
  .pergola-img {
    height: 380px !important;
    min-height: 380px !important;
  }

  .pergola-info {
    padding: 32px 36px !important;
  }

  .pergola-info h2 {
    font-size: 28px !important;
  }

  .pergola-info .tab-desc,
  .pergola-info p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
}

/* ─── HOME SERVICES CARDS (SRV-CARD) POLISHED STYLES ─── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.srv-card {
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4/5 !important;
  cursor: pointer !important;
  display: block !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.srv-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

.srv-card .srv-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.srv-card:hover .srv-img {
  transform: scale(1.06) !important;
}

.srv-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(11, 15, 25, 0.98) 0%, rgba(11, 15, 25, 0.85) 48%, rgba(11, 15, 25, 0.45) 75%, rgba(11, 15, 25, 0.15) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.srv-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 32px 28px !important;
  z-index: 2 !important;
}

.srv-badge {
  display: inline-block !important;
  background: #be1620 !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 8px rgba(190, 22, 32, 0.45) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.srv-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(24px, 2.3vw, 30px) !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.srv-desc {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(14px, 1.05vw, 15.5px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.srv-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #be1620 !important;
  padding-bottom: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.srv-card:hover .srv-link {
  border-bottom-color: #be1620 !important;
  transform: translateX(4px) !important;
}

@media (max-width: 768px) {
  .services {
    padding: 64px 20px !important;
  }

  .srv-card {
    aspect-ratio: auto !important;
    min-height: 450px !important;
    border-radius: 14px !important;
  }

  .srv-content {
    padding: 24px 20px 28px 20px !important;
  }

  .srv-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
    margin-bottom: 10px !important;
  }

  .srv-title {
    font-size: clamp(21px, 5.5vw, 24px) !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  .srv-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .srv-link {
    font-size: 13.5px !important;
  }
}
\n
/* ==========================================================================
   FOOTER COMPACT & REFINED (USER REQUEST DEFINITIVE)
   ========================================================================== */
footer {
  background-color: #0b1120 !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 24px 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.footer-logo img,
footer .footer-logo img {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.9 !important;
  display: block !important;
  transition: opacity 0.3s ease !important;
}

.footer-logo img:hover,
footer .footer-logo img:hover {
  opacity: 1 !important;
}

footer .footer-links {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

footer .footer-links a {
  color: #cbd5e1 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 2px 4px !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

footer .footer-links a:hover {
  color: #be1620 !important;
  text-decoration: underline !important;
}

footer .footer-copy {
  color: #94a3b8 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  footer {
    padding: 20px 16px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .footer-logo img,
  footer .footer-logo img {
    height: 34px !important;
    max-height: 34px !important;
    margin: 0 auto !important;
  }
  footer .footer-links {
    justify-content: center !important;
    gap: 12px !important;
  }
  footer .footer-links a {
    font-size: 13px !important;
    margin: 2px 4px !important;
  }
  footer .footer-copy {
    font-size: 12px !important;
  }
}
\n
/* ==========================================================================
   NAV LABEL AS DROPDOWN TRIGGER (USER REQUEST DEFINITIVE)
   ========================================================================== */
.nav-item > .nav-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  user-select: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 0 !important;
  transition: color 0.2s ease !important;
}

/* neutralized */

nav.scrolled .nav-links > .nav-item > .nav-label,
body:not(.home) nav .nav-links > .nav-item > .nav-label {
  color: #1a1a1a !important;
  text-shadow: none !important;
}

.nav-item > .nav-label:hover,
nav.scrolled .nav-links > .nav-item > .nav-label:hover {
  color: #be1620 !important;
}

@media (max-width: 991px) {
  .nav-item > .nav-label {
    color: #ffffff !important;
    font-size: 15px !important;
    padding: 10px 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
    display: flex !important;
  }
}


/* ==========================================================================
   DEFINITIVE SOLID NAVBAR ON SUBPAGES (PREVENTS COLLISION ON SCROLL)
   ========================================================================== */
body:not(.home) nav,
body:not(.home) nav:not(.scrolled),
body:not(.home) nav.scrolled {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.25s ease !important;
}

body:not(.home) nav .nav-links > .nav-item > .nav-label,
body:not(.home) nav .nav-links > .nav-item > a,
body:not(.home) nav:not(.scrolled) .nav-links > .nav-item > .nav-label,
body:not(.home) nav:not(.scrolled) .nav-links > .nav-item > a,
body:not(.home) nav.scrolled .nav-links > .nav-item > .nav-label,
body:not(.home) nav.scrolled .nav-links > .nav-item > a {
  color: #1a1a1a !important;
  text-shadow: none !important;
}

body:not(.home) nav .nav-links > .nav-item > .nav-label:hover,
body:not(.home) nav .nav-links > .nav-item > a:hover {
  color: #be1620 !important;
}

body:not(.home) nav .nav-toggle,
body:not(.home) nav:not(.scrolled) .nav-toggle {
  color: #1a1a1a !important;
}

body:not(.home) section.pergolas,
body:not(.home) section.techos,
body:not(.home) main {
  padding-top: 140px !important;
}

@media (max-width: 991px) {
  body:not(.home) nav .nav-links,
  body.home nav .nav-links {
    background: #0b1120 !important;
  }
  body:not(.home) nav .nav-links > .nav-item > .nav-label,
  body:not(.home) nav .nav-links > .nav-item > a {
    color: #ffffff !important;
  }
}

/* ─── CONTACT SECTION & CARD FOR PRODUCT PAGES ─── */
.contacto {
  background: #f8fafc !important;
  padding: 72px 24px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.contact-card {
  max-width: 620px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 44px 38px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

.contact-card h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  text-align: center !important;
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
}

.contact-card .contact-sub {
  font-family: 'Playfair Display', serif !important;
  font-size: 16px !important;
  color: #64748b !important;
  text-align: center !important;
  margin-bottom: 28px !important;
  line-height: 1.55 !important;
}

.contact-card .form-group input,
.contact-card .form-group textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.contact-card .form-group input:focus,
.contact-card .form-group textarea:focus {
  border-color: #be1620 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(190, 22, 32, 0.12) !important;
}

.contact-card .btn-red {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}

.contact-card .btn-red:hover {
  background: #9e121a !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 600px) {
  .contacto {
    padding: 44px 16px !important;
  }
  .contact-card {
    padding: 28px 18px !important;
    border-radius: 12px !important;
  }
}

/* ==========================================================================
   DROPDOWN ZONE & NAVBAR LUXURY OVERHAUL (DEFINITIVE)
   ========================================================================== */

/* Universal: Unified Luxury Navigation Typography & Spacing (Desktop) */
@media (min-width: 992px) {
  .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    position: relative !important;
  }
}

.nav-item {
  position: relative !important;
  display: inline-block !important;
}

.nav-item > .nav-label,
.nav-links > .nav-item > a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  padding: 12px 4px !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

/* Home hero navbar hover */
@media (min-width: 992px) {
  body.home nav:not(.scrolled) .nav-links > .nav-item > .nav-label:hover,
  body.home nav:not(.scrolled) .nav-links > .nav-item > a:hover {
    color: #be1620 !important;
  }
}

/* Scrolled or interior pages */
nav.scrolled .nav-links > .nav-item > .nav-label,
nav.scrolled .nav-links > .nav-item > a,
body:not(.home) nav .nav-links > .nav-item > .nav-label,
body:not(.home) nav .nav-links > .nav-item > a {
  color: #1a1a1a !important;
  text-shadow: none !important;
}

nav.scrolled .nav-links > .nav-item > .nav-label:hover,
nav.scrolled .nav-links > .nav-item > a:hover,
body:not(.home) nav .nav-links > .nav-item > .nav-label:hover,
body:not(.home) nav .nav-links > .nav-item > a:hover {
  color: #be1620 !important;
}

/* Elegant Chevron Arrow (CSS Vector Chevron - Never renders as a dash or text glyph) */
.nav-arrow {
  display: inline-block !important;
  position: relative !important;
  width: 7px !important;
  height: 7px !important;
  margin-left: 5px !important;
  vertical-align: 1px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
}

.nav-arrow::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 4px !important;
  height: 4px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 0.85 !important;
}

.nav-item:hover .nav-arrow::after,
.nav-item.open .nav-arrow::after {
  transform: rotate(-135deg) !important;
  top: 3px !important;
}

/* ─── DROPDOWN PANEL (Modern Luxury UI with Hover Bridge) ─── */
.dropdown,
.nav-links .dropdown,
.nav-item .dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  padding: 8px !important;
  min-width: 260px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
  z-index: 500 !important;
}

/* Invisible Bridge so moving cursor to dropdown never breaks hover */
.dropdown::before {
  content: '' !important;
  position: absolute !important;
  top: -18px !important;
  left: 0 !important;
  right: 0 !important;
  height: 18px !important;
  background: transparent !important;
}

/* Open states: supports BOTH hover and click .open */
.nav-item:hover .dropdown,
.nav-item.open .dropdown {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  display: block !important;
}

/* Modern Left-Aligned Typography in Dropdown Links */
.dropdown a,
.nav-links .dropdown a,
.nav-item .dropdown a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  border: none !important;
  margin-bottom: 2px !important;
}

.dropdown a:hover,
.nav-links .dropdown a:hover,
.nav-item .dropdown a:hover {
  background: rgba(190, 22, 32, 0.07) !important;
  color: #be1620 !important;
  padding-left: 20px !important;
}

/* CTA Presupuesto Button: Never wrap or truncate */
.nav-cta {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  padding: 11px 22px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   HERO TITLE & PROPORTIONS: PLAYFAIR DISPLAY SERIF, IMPOSING & LIFTED
   ========================================================================== */

/* Large Desktop / 4K / 1080p Screens (Screens >= 992px) */
@media (min-width: 992px) {
  .hero {
    position: relative !important;
    height: 100vh !important;
    min-height: 660px !important;
    display: flex !important;
    align-items: flex-end !important;
    padding-top: 100px !important;
    box-sizing: border-box !important;
  }

  .hero-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 0 52px 115px !important;
    max-width: 1200px !important;
  }

  .hero-eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 3.5px !important;
    text-transform: uppercase !important;
    color: #be1620 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  }

  .hero-eyebrow::before {
    content: '' !important;
    width: 28px !important;
    height: 2px !important;
    background: #be1620 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
  }

  .hero-h1 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(66px, 7.0vw, 92px) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 22px !important;
    max-width: 1180px !important;
    color: #ffffff !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.75) !important;
  }

  .hero-h1 em {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    color: var(--red-light, #be1620) !important;
    font-weight: 400 !important;
  }

  .hero-sub {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9) !important;
    line-height: 1.55 !important;
    max-width: 600px !important;
    margin-bottom: 34px !important;
  }

  .hero-right {
    right: 52px !important;
    bottom: 115px !important;
  }

  /* Universal Desktop Nav (Screens >= 992px) */
  nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    height: 108px !important;
    padding: 0 40px !important;
  }
}

.nav-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.nav-logo img,
body.home .nav-logo img {
  height: 94px !important;
  max-height: 94px !important;
  width: auto !important;
  object-fit: contain !important;
}

@media (min-width: 992px) {
  .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 1 !important;
  }
}

.nav-item > .nav-label,
.nav-links > .nav-item > a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  white-space: nowrap !important;
}

.nav-cta {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 10px 18px !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Laptops & Standard Screens (992px to 1440px) - Covers 1200, 1280, 1366, 1440 */
@media (min-width: 992px) and (max-width: 1440px) {
  nav {
    padding: 0 24px !important;
    height: 96px !important;
  }
  .nav-logo img,
  body.home .nav-logo img {
    height: 82px !important;
    max-height: 82px !important;
    width: auto !important;
  }
  .nav-links {
    gap: 11px !important;
  }
  .nav-item > .nav-label,
  .nav-links > .nav-item > a {
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
  }
  .nav-cta {
    padding: 8px 14px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.6px !important;
  }
  .hero {
    min-height: 600px !important;
    padding-top: 100px !important;
  }
  .hero-content {
    padding: 0 44px 105px !important;
    max-width: 1150px !important;
  }
  .hero-eyebrow {
    font-size: 12px !important;
    letter-spacing: 3px !important;
    margin-bottom: 16px !important;
  }
  .hero-h1 {
    font-size: clamp(60px, 6.2vw, 82px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 20px !important;
    max-width: 1150px !important;
  }
  .hero-sub {
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin-bottom: 26px !important;
    max-width: 560px !important;
  }
  .hero-right {
    right: 44px !important;
    bottom: 105px !important;
  }
  .hero-stat .n {
    font-size: 38px !important;
  }
}

/* Screens between 1181px and 1250px */
@media (min-width: 1181px) and (max-width: 1250px) {
  nav {
    padding: 0 16px !important;
  }
  .nav-logo img,
  body.home .nav-logo img {
    height: 74px !important;
    max-height: 74px !important;
  }
  .nav-links {
    gap: 8px !important;
  }
  .nav-cta {
    padding: 8px 12px !important;
  }
}

/* Extra Compact Laptops (992px to 1180px) */
@media (min-width: 992px) and (max-width: 1180px) {
  nav {
    padding: 0 14px !important;
    height: 84px !important;
  }
  .nav-logo img,
  body.home .nav-logo img {
    height: 56px !important;
    max-height: 56px !important;
  }
  .nav-links {
    gap: 7px !important;
  }
  .nav-item > .nav-label,
  .nav-links > .nav-item > a {
    font-size: 10px !important;
    letter-spacing: 0.2px !important;
  }
  .nav-cta {
    padding: 7px 11px !important;
    font-size: 9.5px !important;
  }
}

/* Height-constrained laptop screens (max-height: 800px) */
@media (min-width: 992px) and (max-height: 800px) {
  .hero {
    padding-top: 96px !important;
  }
  .hero-content {
    padding-bottom: 84px !important;
  }
  .hero-h1 {
    font-size: clamp(54px, 5.8vw, 74px) !important;
    line-height: 1.06 !important;
    margin-bottom: 16px !important;
  }
  .hero-sub {
    font-size: 15.5px !important;
    margin-bottom: 20px !important;
  }
  .hero-right {
    bottom: 84px !important;
  }
  .hero-stat .n {
    font-size: 34px !important;
  }
}

/* Mobile & Tablet Dropdown Adjustments */
@media (max-width: 991px) {
  .nav-item > .nav-label {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    font-size: 14.5px !important;
    color: #ffffff !important;
  }
  .nav-links .dropdown,
  .nav-item .dropdown,
  .dropdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 100% !important;
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 6px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .dropdown::before {
    display: none !important;
  }
  .nav-item.open .dropdown {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  .dropdown a,
  .nav-links .dropdown a,
  .nav-item .dropdown a {
    color: #e2e8f0 !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
  }
  .dropdown a:hover {
    background: rgba(190, 22, 32, 0.25) !important;
    color: #ffffff !important;
    padding-left: 16px !important;
  }
}

/* ==========================================================================
   CAROUSEL / DOUBLE PHOTOS INTERACTIVITY & VISUALS (DEFINITIVE)
   ========================================================================== */
.carousel-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  user-select: none !important;
}

.carousel-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.carousel-slide.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

.carousel-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(15, 23, 42, 0.65) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 20 !important;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.carousel-arrow:hover {
  background: #be1620 !important;
  border-color: #be1620 !important;
  transform: translateY(-50%) scale(1.12) !important;
  box-shadow: 0 4px 14px rgba(190, 22, 32, 0.45) !important;
}

.carousel-prev { left: 16px !important; }
.carousel-next { right: 16px !important; }

.carousel-dots {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 10px !important;
  z-index: 20 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  backdrop-filter: blur(4px) !important;
}

.carousel-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

.carousel-dot.active {
  background: #be1620 !important;
  border-color: #ffffff !important;
  transform: scale(1.35) !important;
}

/* ==========================================================================
   DEFINITIVE MOBILE NAVIGATION SHIELD (ABSOLUTE PRIORITY OVER ALL PRIOR RULES)
   ========================================================================== */
@media (max-width: 991px) {
  /* Hide the navbar menu when not open so it NEVER appears in the layout or flows into view */
  nav .nav-links:not(.open),
  body.home nav .nav-links:not(.open),
  body:not(.home) nav .nav-links:not(.open),
  .nav-links:not(.open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* When open: full screen mobile drawer */
  nav .nav-links.open,
  body.home nav .nav-links.open,
  body:not(.home) nav .nav-links.open,
  .nav-links.open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    background: #0b1120 !important;
    flex-direction: column !important;
    padding: 16px 20px 80px 20px !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 99999 !important;
  }
}







/* ==========================================================================
   PERGOLA CERRAMIENTOS CROSS-SELL BLOCK - HARMONIZED WITH SITE TYPOGRAPHY
   ========================================================================== */
.pergola-cerramientos-block {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 5px solid #be1620 !important;
  border-radius: 14px !important;
  padding: 36px 32px !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.pergola-cerramientos-block .cerramientos-badge {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #be1620 !important;
  margin-bottom: 10px !important;
  display: inline-block !important;
}

.pergola-cerramientos-block h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(23px, 2.5vw, 30px) !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 0 14px !important;
  line-height: 1.25 !important;
}

.pergola-cerramientos-block p.cerramientos-lead {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(16.5px, 1.25vw, 18.5px) !important;
  line-height: 1.7 !important;
  color: #2c2c2c !important;
  margin: 0 0 22px !important;
  font-weight: 400 !important;
}

.pergola-cerramientos-block .cerramiento-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: #f8fafc !important;
  padding: 18px 18px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.pergola-cerramientos-block .cerramiento-card:hover {
  border-color: #be1620 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(190, 22, 32, 0.08) !important;
  background: #ffffff !important;
}

.pergola-cerramientos-block .cerramiento-card .card-icon {
  color: #be1620 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.pergola-cerramientos-block .cerramiento-card .card-title {
  display: block !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

.pergola-cerramientos-block .cerramiento-card:hover .card-title {
  color: #be1620 !important;
}

.pergola-cerramientos-block .cerramiento-card .card-desc {
  display: block !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #4a5568 !important;
  font-weight: 400 !important;
}

.carousel-counter {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  z-index: 20 !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0.5px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 768px) {
  .pergola-cerramientos-block {
    padding: 24px 18px !important;
  }
  .pergola-img-badge {
    top: 14px !important;
    left: 14px !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    letter-spacing: 0.5px !important;
    max-width: calc(100% - 95px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .carousel-counter {
    top: 14px !important;
    right: 14px !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
  }
}

/* ==========================================================================
   DEFINITIVE MOBILE & TABLET NAVBAR & DROPDOWN ACCORDION OVERRIDE
   (STRICTLY SCOPED TO max-width: 991px — DESKTOP STYLES 100% PRESERVED)
   ========================================================================== */
@media (max-width: 991px) {
  /* 1. TOP NAVBAR CONTAINER */
  nav,
  body.home nav,
  body:not(.home) nav,
  nav.scrolled {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }

  /* 2. LOGO: Proportionate, sharp & left-aligned */
  .nav-logo,
  body.home .nav-logo,
  body:not(.home) nav .nav-logo {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    margin-right: auto !important;
    flex-shrink: 0 !important;
  }

  .nav-logo img,
  body.home .nav-logo img,
  body:not(.home) nav .nav-logo img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: 154px !important;
    object-fit: contain !important;
  }

  /* 3. CTA BUTTON: Compact, perfectly proportioned, placed before hamburger */
  .nav-cta,
  nav .nav-cta,
  nav.scrolled .nav-cta,
  body.home .nav-cta,
  body:not(.home) nav .nav-cta {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    background: var(--red, #be1620) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(190, 22, 32, 0.35) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  /* 4. HAMBURGER TOGGLE: Far right (Black for maximum contrast) */
  .nav-toggle,
  nav .nav-toggle,
  nav.scrolled .nav-toggle,
  body.home nav .nav-toggle,
  body.home nav.scrolled .nav-toggle,
  body:not(.home) nav .nav-toggle,
  body:not(.home) nav.scrolled .nav-toggle {
    order: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 6px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #111827 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  .nav-toggle svg,
  nav .nav-toggle svg,
  nav.scrolled .nav-toggle svg,
  body.home nav .nav-toggle svg,
  body.home nav.scrolled .nav-toggle svg,
  body:not(.home) nav .nav-toggle svg,
  body:not(.home) nav.scrolled .nav-toggle svg,
  .nav-toggle svg path,
  nav .nav-toggle svg path,
  nav.scrolled .nav-toggle svg path {
    width: 26px !important;
    height: 26px !important;
    stroke: #111827 !important;
    stroke-width: 2.2 !important;
  }

  /* 5. MOBILE MENU DRAWER */
  nav .nav-links:not(.open),
  .nav-links:not(.open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    left: -9999px !important;
  }

  nav .nav-links.open,
  .nav-links.open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    background: #0b1120 !important;
    flex-direction: column !important;
    padding: 16px 20px 80px 20px !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
  }

  /* 6. NAV ITEMS & ACCORDION LABELS: Pure white matching CONTACTO */
  .nav-links .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  nav .nav-links .nav-item > .nav-label,
  nav.scrolled .nav-links .nav-item > .nav-label,
  body.home nav .nav-links .nav-item > .nav-label,
  body.home nav.scrolled .nav-links .nav-item > .nav-label,
  body:not(.home) nav .nav-links .nav-item > .nav-label,
  body:not(.home) nav.scrolled .nav-links .nav-item > .nav-label,
  nav .nav-links .nav-item > a,
  nav.scrolled .nav-links .nav-item > a,
  body.home nav .nav-links .nav-item > a,
  body.home nav.scrolled .nav-links .nav-item > a,
  body:not(.home) nav .nav-links .nav-item > a,
  body:not(.home) nav.scrolled .nav-links .nav-item > a,
  .nav-links .nav-item > .nav-label,
  .nav-links .nav-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 15px 4px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    opacity: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    user-select: none !important;
    box-sizing: border-box !important;
    text-shadow: none !important;
    transition: color 0.2s ease !important;
  }

  nav .nav-links .nav-item.open > .nav-label,
  nav.scrolled .nav-links .nav-item.open > .nav-label,
  .nav-links .nav-item.open > .nav-label {
    color: #be1620 !important;
  }

  .nav-links .nav-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    color: #94a3b8 !important;
    transition: transform 0.25s ease, color 0.2s ease !important;
  }

  nav .nav-links .nav-item.open > .nav-label .nav-arrow,
  .nav-links .nav-item.open > .nav-label .nav-arrow,
  .nav-links .nav-item.open > .nav-arrow {
    transform: rotate(180deg) !important;
    color: #be1620 !important;
  }

  /* 7. DROPDOWN SUBMENU CONTAINER: ACCORDION FORMAT NEVER CROPPED */
  .nav-links .dropdown,
  .nav-links .nav-item .dropdown,
  .nav-links .nav-item:hover .dropdown,
  .nav-links .nav-item.open .dropdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important; /* CRITICAL: PREVENTS translateX(-50%) OVERRIDE */
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .nav-links .nav-item:not(.open) .dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  .nav-links .nav-item.open .dropdown {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    background: rgba(30, 41, 59, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    margin: 4px 0 14px 0 !important;
    gap: 3px !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    pointer-events: auto !important;
  }

  /* 8. DROPDOWN SUBMENU LINKS: 100% VISIBLE & READABLE */
  .nav-links .dropdown a,
  .nav-links .nav-item .dropdown a,
  .nav-links .nav-item.open .dropdown a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 14px !important;
    border-radius: 6px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #f8fafc !important; /* ULTRA CLEAR WHITE */
    background: transparent !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transform: none !important;
    transition: all 0.15s ease !important;
  }

  .nav-links .dropdown a:hover,
  .nav-links .dropdown a:active,
  .nav-links .nav-item .dropdown a:hover,
  .nav-links .nav-item .dropdown a:active {
    background: rgba(190, 22, 32, 0.3) !important;
    color: #ffffff !important;
    padding-left: 18px !important;
  }
}

@media (max-width: 480px) {
  nav,
  body.home nav,
  body:not(.home) nav,
  nav.scrolled {
    padding: 0 12px !important;
  }
  .nav-logo img,
  body.home .nav-logo img,
  body:not(.home) nav .nav-logo img {
    max-width: 145px !important;
    max-height: 36px !important;
    height: 36px !important;
    width: auto !important;
    object-fit: contain !important;
  }
  .nav-cta,
  nav .nav-cta,
  nav.scrolled .nav-cta,
  body.home .nav-cta,
  body:not(.home) nav .nav-cta {
    padding: 7px 10px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.4px !important;
  }
  .nav-toggle,
  nav .nav-toggle,
  nav.scrolled .nav-toggle,
  body.home nav .nav-toggle,
  body:not(.home) nav .nav-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 4px !important;
    color: #111827 !important;
  }
  .nav-toggle svg,
  nav .nav-toggle svg,
  nav.scrolled .nav-toggle svg,
  body.home nav .nav-toggle svg,
  body:not(.home) nav .nav-toggle svg,
  .nav-toggle svg path,
  nav .nav-toggle svg path {
    width: 24px !important;
    height: 24px !important;
    stroke: #111827 !important;
    stroke-width: 2.2 !important;
  }
  .hero-h1 {
    font-size: clamp(31px, 8.2vw, 35px) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.6px !important;
  }
}




/* ==========================================================================
   FASE 1 & 2: SEO HEADINGS & SILO ARCHITECTURE STYLES
   ========================================================================== */
.brands-title {
  text-align: center !important;
  font-size: clamp(24px, 3.2vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  margin: 48px 0 24px !important;
  font-family: 'Playfair Display', serif !important;
  line-height: 1.25 !important;
  display: block !important;
}

.cta-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  display: block !important;
  margin-bottom: 16px !important;
}

.seo-coverage-text {
  font-family: 'Playfair Display', serif !important;
  font-size: 19.5px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.7 !important;
  max-width: 920px !important;
  margin: 0 auto 28px !important;
  font-weight: 400 !important;
  text-align: center !important;
}

.tech-subheading,
.section-subheading {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 28px 0 16px !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* ==========================================================================
   FASE 2.3: MODERN SILO FOOTER ARCHITECTURE & LOCAL SEO
   ========================================================================== */
footer.site-footer,
footer {
  background: #0b1120 !important;
  color: #f8fafc !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 64px 48px 32px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

.footer-container {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1.1fr 1.3fr !important;
  gap: 40px !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.footer-col-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.footer-logo-pill {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  margin-bottom: 20px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.footer-logo-pill:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}

.footer-logo-pill img {
  height: 40px !important;
  width: auto !important;
  max-width: 190px !important;
  object-fit: contain !important;
  display: block !important;
}

.footer-desc {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #94a3b8 !important;
  margin: 0 0 20px 0 !important;
  max-width: 380px !important;
}

.footer-contact-direct {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 18px !important;
  margin-top: 4px !important;
}

.footer-tel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.footer-tel:hover {
  color: #be1620 !important;
}

.footer-col {
  display: flex !important;
  flex-direction: column !important;
}

.footer-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 0 18px 0 !important;
  border-left: 3px solid #be1620 !important;
  padding-left: 8px !important;
}

.footer-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}

.footer-menu li a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-block !important;
}

.footer-menu li a:hover {
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

.footer-bottom {
  margin-top: 48px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.footer-copy {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  color: #64748b !important;
}

.footer-legal-links {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.footer-legal-links a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.72rem !important;
  opacity: 0.65 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: opacity 0.2s, color 0.2s !important;
}

.footer-legal-links a:hover {
  opacity: 1 !important;
  color: #ffffff !important;
}

.footer-legal-links .sep {
  color: #475569 !important;
  font-size: 0.72rem !important;
}

@media (max-width: 991px) {
  footer.site-footer,
  footer {
    padding: 48px 24px 28px 24px !important;
  }
  .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 14px !important;
  }
  .footer-legal-links {
    justify-content: center !important;
  }
}














/* ==========================================================================
   AJUSTES DEFINITIVOS SOLICITADOS POR EL USUARIO:
   1. Eyebrow 'TODO MADRID': Negrita 800, badge cristal oscuro, #be1620 100% legible.
   2. Nav Desktop: Letras siempre en negro (#111827) tanto arriba como al deslizar, desplegable blanco.
   3. Foto Hero Desktop: No se corta el edificio (background-position: center top, transform-origin: center top).
   4. Hero Móvil: Título más grande, botones más pequeños y posicionados más arriba.
   5. Subapartados (Pérgolas, Cerramientos): '01 — PÉRGOLAS' bajado con padding elegante.
   ========================================================================== */

/* 1. CABECERA BLANCA FIJA CON LETRAS NEGRAS DESDE EL INICIO (SIN SCROLL Y CON SCROLL) */
header,
nav,
#nav,
body.home nav,
body.home #nav,
body:not(.home) nav,
body:not(.home) #nav,
nav.scrolled,
body.home nav.scrolled,
body:not(.home) nav.scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* 2. TIPOGRAFÍA NAVBAR EN ESCRITORIO: SIEMPRE NEGRO (#111827) Y HOVER ROJO (#be1620) */
@media (min-width: 992px) {
  nav .nav-links > .nav-item > .nav-label,
  nav .nav-links > .nav-item > a,
  .nav-links > .nav-item > .nav-label,
  .nav-links > .nav-item > a,
  body.home nav .nav-links > .nav-item > .nav-label,
  body.home nav .nav-links > .nav-item > a,
  body.home nav:not(.scrolled) .nav-links > .nav-item > .nav-label,
  body.home nav:not(.scrolled) .nav-links > .nav-item > a,
  body.home nav.scrolled .nav-links > .nav-item > .nav-label,
  body.home nav.scrolled .nav-links > .nav-item > a,
  body:not(.home) nav .nav-links > .nav-item > .nav-label,
  body:not(.home) nav .nav-links > .nav-item > a,
  body:not(.home) nav:not(.scrolled) .nav-links > .nav-item > .nav-label,
  body:not(.home) nav:not(.scrolled) .nav-links > .nav-item > a,
  body:not(.home) nav.scrolled .nav-links > .nav-item > .nav-label,
  body:not(.home) nav.scrolled .nav-links > .nav-item > a {
    color: #111827 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    transition: color 0.2s ease !important;
  }

  nav .nav-links > .nav-item > .nav-label .nav-arrow,
  body.home nav .nav-links > .nav-item > .nav-label .nav-arrow,
  .nav-links > .nav-item > .nav-label .nav-arrow {
    color: #64748b !important;
  }

  nav .nav-links > .nav-item > .nav-label:hover,
  nav .nav-links > .nav-item > a:hover,
  body.home nav .nav-links > .nav-item > .nav-label:hover,
  body.home nav .nav-links > .nav-item > a:hover,
  body:not(.home) nav .nav-links > .nav-item > .nav-label:hover,
  body:not(.home) nav .nav-links > .nav-item > a:hover,
  .nav-links > .nav-item > .nav-label:hover,
  .nav-links > .nav-item > a:hover {
    color: #be1620 !important;
  }

  nav .nav-links > .nav-item:hover > .nav-label .nav-arrow,
  body.home nav .nav-links > .nav-item:hover > .nav-label .nav-arrow {
    color: #be1620 !important;
  }

  /* DESPLEGABLE EN BLANCO PURO CON BORDES SUAVES */
  .dropdown,
  .nav-item .dropdown,
  nav .dropdown,
  body.home nav .dropdown,
  body:not(.home) nav .dropdown {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
  }

  .dropdown a,
  .nav-item .dropdown a,
  nav .dropdown a {
    color: #111827 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    display: block !important;
    text-align: left !important;
    background: transparent !important;
    text-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .dropdown a:hover,
  .nav-item .dropdown a:hover,
  nav .dropdown a:hover {
    background: rgba(190, 22, 32, 0.08) !important;
    color: #be1620 !important;
  }
}

/* LOGO OSCURO SOBRE LA CABECERA BLANCA */
.nav-logo .logo-dark {
  display: block !important;
}
.nav-logo .logo-light {
  display: none !important;
}
.nav-toggle,
nav .nav-toggle,
body.home nav .nav-toggle {
  color: #111827 !important;
}
.nav-toggle svg {
  stroke: #111827 !important;
}

/* 3. FOTO DEL HERO EN ESCRITORIO (NO SE CORTA EL EDIFICIO ARRIBA) */
@media (min-width: 992px) {
  body.home .hero {
    position: relative !important;
    height: 100vh !important;
    min-height: 680px !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding-top: 80px !important;
    box-sizing: border-box !important;
  }

  .hero-bg {
    position: absolute !important;
    inset: 0 !important;
    background-image: url('./highres_imgs/portada_ai.webp') !important;
    background-size: cover !important;
    background-position: center 32% !important;
    transform: scale(1.06) !important;
    animation: zoomOut 14s ease-out forwards !important;
  }

  .hero-grad {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(165deg, rgba(13,13,13,0.08) 0%, rgba(13,13,13,0.50) 55%, rgba(13,13,13,0.95) 100%) !important;
  }
}

/* 4. TODO MADRID · MURCIA · ALICANTE: MÁXIMA LEGIBILIDAD, NEGRITA 800 Y EXACTO ROJO #be1620 */
.hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #be1620 !important;
  margin-bottom: 22px !important;
  padding: 6px 16px 6px 12px !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(190, 22, 32, 0.3) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  text-shadow: none !important;
  width: fit-content !important;
}

.hero-eyebrow::before {
  content: '' !important;
  width: 16px !important;
  height: 3px !important;
  background: #be1620 !important;
  border-radius: 2px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* TEXTOS Y ACENTOS EN ROJO CORPORATIVO (#be1620) */
.hero-h1 em,
.hero-content em,
.sec-h em {
  color: #be1620 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
  font-style: italic !important;
}

.btn-red,
.nav-cta,
.tab-cta {
  background: #be1620 !important;
}

/* 5. HERO EN MÓVIL: TÍTULO MÁS GRANDE, BOTONES MÁS PEQUEÑOS Y COLOCADO MÁS ARRIBA */
@media (max-width: 991px) {
  body.home .hero {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-top: 105px !important;
    padding-bottom: 30px !important;
    min-height: 92vh !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  body.home .hero-content {
    margin-top: 20px !important;
    padding: 0 20px 20px 20px !important;
    max-width: 100% !important;
    z-index: 2 !important;
  }

  .hero-h1,
  body.home .hero-h1 {
    font-size: clamp(38px, 9.6vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 16px !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9) !important;
  }

  .hero-sub,
  body.home .hero-sub {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 20px !important;
    max-width: 92% !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
  }

  .hero-btns,
  body.home .hero-btns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 6px !important;
  }

  .hero-btns a.btn-red,
  .hero-btns a.btn-outline,
  .hero-btns .btn-red,
  .hero-btns .btn-outline,
  body.home .hero-btns a.btn-red,
  body.home .hero-btns a.btn-outline {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    text-transform: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  }

  .hero-eyebrow {
    font-size: 12px !important;
    letter-spacing: 2px !important;
    padding: 5px 14px 5px 10px !important;
    margin-bottom: 14px !important;
  }
}

/* 6. SUBAPARTADOS (PÉRGOLAS, CERRAMIENTOS, TECHOS): BAJAR TÍTULOS '01 — PÉRGOLAS DE ALTA GAMA' */
body:not(.home) section.pergolas,
body:not(.home) section.techos,
body:not(.home) section.cerramientos,
body:not(.home) section.ventanas,
body:not(.home) section.puertas,
body:not(.home) section.service-detail,
body:not(.home) main {
  padding-top: 155px !important;
}

body:not(.home) .pergolas-header,
body:not(.home) .service-header {
  margin-top: 20px !important;
  margin-bottom: 36px !important;
}

body:not(.home) .sec-label {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}

@media (max-width: 991px) {
  body:not(.home) section.pergolas,
  body:not(.home) section.techos,
  body:not(.home) section.cerramientos,
  body:not(.home) section.ventanas,
  body:not(.home) section.puertas,
  body:not(.home) section.service-detail,
  body:not(.home) main {
    padding-top: 115px !important;
  }
}

/* 7. FORMULARIO: TÍTULO SIEMPRE OSCURO (#111827) SOBRE FONDO BLANCO */
.cta-title,
.contact-card .cta-title,
.contact-card h5.cta-title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 800 !important;
  color: #111827 !important;
  display: block !important;
  margin-bottom: 16px !important;
  text-align: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 8. CERRAMIENTOS BLOCK 100% VISIBLE */
.pergola-cerramientos-block,
.cerramientos-box,
.cerramientos-section,
.reverse-linking-block,
.reverse-linking-section {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  display: block !important;
}

/* 9. FOOTER LOGO BLANCO */
.footer-logo-pill,
.footer-logo-link {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-block !important;
}
.footer-logo-pill img,
.footer-logo-link img {
  height: 38px !important;
  width: auto !important;
  max-width: 175px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ==========================================================================
   FASE PRE-MIGRACIÓN (05/11):
   1. Enlace Blog en Desktop y Móvil sin desajuste de menú.
   2. Portada Nuestros Servicios Móvil: foto arriba 100% limpia + card blanco debajo.
   3. techos-moviles.html Móvil: rejilla compacta 2x2 de Sensores y Automatismos.
   ========================================================================== */

/* FASE 1: Ajuste fino Desktop Navbar para alojar 'Blog' sin recortes entre 992px y 1340px */
@media (min-width: 992px) and (max-width: 1340px) {
  nav,
  body.home nav,
  body:not(.home) nav {
    padding: 0 18px !important;
  }
  .nav-logo img,
  body.home .nav-logo img {
    max-width: 155px !important;
    height: auto !important;
  }
  .nav-links {
    gap: 10px !important;
  }
  .nav-links > .nav-item > .nav-label,
  .nav-links > .nav-item > a,
  .nav-links > .nav-item > a.nav-link {
    font-size: 11.2px !important;
    letter-spacing: 0.45px !important;
    padding: 10px 2px !important;
  }
  .nav-cta {
    padding: 9px 14px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 992px) and (max-width: 1120px) {
  nav,
  body.home nav,
  body:not(.home) nav {
    padding: 0 12px !important;
  }
  .nav-logo img,
  body.home .nav-logo img {
    max-width: 136px !important;
  }
  .nav-links {
    gap: 7px !important;
  }
  .nav-links > .nav-item > .nav-label,
  .nav-links > .nav-item > a,
  .nav-links > .nav-item > a.nav-link {
    font-size: 10px !important;
    letter-spacing: 0.2px !important;
  }
  .nav-cta {
    padding: 8px 10px !important;
    font-size: 10px !important;
  }
}

/* Asegurar letras blancas limpias dentro del drawer oscuro #0b1120 en móvil */
@media (max-width: 991px) {
  .nav-links.open .nav-item:not(.open) > .nav-label,
  body.home .nav-links.open .nav-item:not(.open) > .nav-label,
  body:not(.home) .nav-links.open .nav-item:not(.open) > .nav-label,
  .nav-links.open .nav-item > a,
  .nav-links.open .nav-item > a.nav-link {
    color: #ffffff !important;
  }
  .nav-links.open .nav-item.open > .nav-label {
    color: #be1620 !important;
  }
}

.footer-menu a.nav-link {
  display: inline-block !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
.footer-menu a.nav-link:hover {
  color: #ffffff !important;
}

/* FASE 2: REDISEÑO MÓVIL EN PORTADA ("NUESTROS SERVICIOS") */
@media (max-width: 768px) {
  .services {
    padding: 56px 18px !important;
  }

  .services .sec-sub-h {
    margin-bottom: 28px !important;
  }

  .services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .srv-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    aspect-ratio: auto !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    transform: none !important;
  }

  .srv-card:hover {
    transform: none !important;
  }

  /* Quitar overlay / fondo negro superpuesto sobre la foto */
  .srv-card::before,
  .srv-card .srv-overlay,
  .srv-card .card-overlay,
  .srv-card > div[style*="linear-gradient"],
  .srv-card > div:nth-child(2):not(.srv-content) {
    background: none !important;
    opacity: 0 !important;
    display: none !important;
    pointer-events: none !important;
  }

  /* Foto limpia arriba */
  .srv-card .srv-img,
  .srv-card:hover .srv-img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 12px 12px 0 0 !important;
    display: block !important;
    transform: none !important;
    z-index: 1 !important;
  }

  /* Ocultar descripciones largas y badge para mostrar solo título y flecha */
  .srv-card p,
  .srv-card .srv-desc,
  .srv-card .srv-badge {
    display: none !important;
  }

  /* Bloque inferior blanco limpio con título y flecha */
  .srv-card .srv-content,
  .srv-card > div:nth-child(3) {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #111827 !important;
    padding: 14px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    z-index: 2 !important;
  }

  .srv-card .srv-title,
  .srv-card h3 {
    color: #111827 !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    margin: 0 !important;
    text-shadow: none !important;
  }

  .srv-card .srv-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #be1620 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 2px !important;
    text-shadow: none !important;
  }
}

/* FASE 3: REESTRUCTURACIÓN MÓVIL EN techos-moviles.html (REJILLA 2x2 SENSORES) */
.techos-sensors-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 14px 0 22px 0 !important;
}

.techos-sensors-grid .feature-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.techos-sensors-grid .feature-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 7px !important;
  background: rgba(190, 22, 32, 0.08) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.techos-sensors-grid .feature-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #be1620 !important;
}

.techos-sensors-grid .feature-text h5 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.25 !important;
}

.techos-sensors-grid .feature-text p {
  font-size: 13px !important;
  color: #475569 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

@media (max-width: 768px) {
  .techos-sensors-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 10px 0 18px 0 !important;
  }

  .techos-sensors-grid .feature-item {
    padding: 12px !important;
    gap: 7px !important;
    border-radius: 10px !important;
  }

  .techos-sensors-grid .feature-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  .techos-sensors-grid .feature-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  .techos-sensors-grid .feature-text h5 {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
  }

  .techos-sensors-grid .feature-text p {
    font-size: 12px !important;
    line-height: 1.32 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   AJUSTES MÓVIL PORTADA V20 (TÍTULO Y TEXTO MÁS ABAJO + ROJO LEGIBLE)
   ========================================================================== */
@media (max-width: 991px) {
  body.home .hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding-top: 180px !important;
    padding-bottom: 42px !important;
    min-height: 88vh !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  body.home .hero-content {
    margin-top: 0 !important;
    padding: 0 20px !important;
    max-width: 100% !important;
    z-index: 2 !important;
  }

  body.home .hero-grad {
    background: linear-gradient(180deg, rgba(13,13,13,0.06) 0%, rgba(13,13,13,0.32) 38%, rgba(13,13,13,0.82) 66%, rgba(13,13,13,0.96) 100%) !important;
  }

  body.home .hero-h1 em {
    color: #be1620 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.98), 0 0 10px rgba(0, 0, 0, 0.85) !important;
    -webkit-text-stroke: 0.35px rgba(255, 220, 220, 0.25) !important;
  }
}