:root {
  --blue: #06478c;
  --navy: #062f5d;
  --red: #d90818;
  --ink: #18334f;
  --muted: #52687f;
  --soft: #f4f6f8;
  --line: #dbe3ea;
  --white: #fff;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: #fff;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
button,
input,
textarea {
  font: inherit;
}
.wrap {
  width: min(1180px, calc(100% - 44px));
  margin: auto;
}
a {
  color: inherit;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.nav {
  height: 78px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  width: 165px;
  flex: 0 0 165px;
}
.brand img {
  width: 100%;
}
.nav nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 1;
}
.nav nav a {
  font-size: 14px;
  font-weight: 800;
  color: #17334f;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
  border-radius: 4px;
}
.nav-cta {
  background: var(--red);
  color: #fff;
  padding: 13px 18px;
  font-size: 15px;
}
.menu {
  display: none;
  border: 0;
  background: none;
  font-size: 30px;
  color: var(--navy);
  cursor: pointer;
}

/* Mobile opening hidden on desktop */
.mobile-opening {
  display: none;
}

/* Desktop hero */
.desktop-hero {
  position: relative;
  min-height: 620px;
  color: #fff;
}
.desktop-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.desktop-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(2, 35, 72, 0.93),
    rgba(2, 46, 91, 0.64) 52%,
    rgba(2, 46, 91, 0.08) 80%
  );
}
.desktop-hero-content {
  position: relative;
  z-index: 2;
  min-height: 620px;
  display: flex;
  align-items: center;
}
.desktop-hero-copy {
  max-width: 670px;
}
.desktop-hero h1 {
  font-size: 66px;
  line-height: 0.96;
  margin: 0 0 22px;
  letter-spacing: -2px;
}
.desktop-hero p {
  font-size: 24px;
  max-width: 570px;
  margin: 0;
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.eyebrow {
  display: inline-block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.12em;
  border-bottom: 3px solid var(--red);
  padding-bottom: 5px;
  margin-bottom: 16px;
}
.eyebrow.light {
  color: #fff;
}
.btn {
  min-height: 54px;
  padding: 0 22px;
  font-size: 17px;
  border: 1px solid transparent;
}
.primary {
  background: var(--red);
  color: #fff;
}
.ghost {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.white {
  background: #fff;
  color: var(--navy);
}

.section {
  padding: 78px 0;
}
.visual-heading {
  max-width: 780px;
  margin-bottom: 30px;
}
.section h2 {
  font-size: 44px;
  line-height: 1.04;
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: -1px;
}
.section p {
  font-size: 19px;
  line-height: 1.6;
  color: #3c536a;
}

/* Visual projects */
.projects {
  background: #fff;
}
.project-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 330px 330px;
  gap: 12px;
}
.project-gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #ddd;
}
.project-gallery .project-main {
  grid-row: 1/3;
}
.project-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.project-gallery figure:hover img {
  transform: scale(1.02);
}
.project-gallery figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(5, 45, 86, 0.9);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 16px;
}
.gallery-cta {
  display: block;
  margin: 22px auto 0;
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
  padding: 13px 22px;
  font-weight: 900;
  cursor: pointer;
}

/* Services */
.services {
  background: var(--soft);
}
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-card {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  text-decoration: none;
  background: #111;
}
.service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card:after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  background: linear-gradient(transparent, rgba(2, 32, 63, 0.95));
}
.service-card div {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 20px;
  color: #fff;
}
.service-card span {
  font-weight: 900;
}
.service-card h3 {
  font-size: 28px;
  line-height: 1.08;
  margin: 5px 0 0;
}

/* Installation */
.installation {
  background: #fff;
}
.installation > .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 46px;
  align-items: center;
}
.installation-image {
  position: relative;
}
.installation-image img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}
.image-stamp {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--blue);
  color: #fff;
  padding: 16px 20px;
  font-size: 22px;
  line-height: 1.05;
  font-weight: 900;
}
.process-strip {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}
.process-strip span {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-size: 19px;
  font-weight: 800;
}
.process-strip b {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

/* Plans */
.plans {
  background: var(--soft);
}
.plans-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 54px;
  align-items: center;
}
.plans-image {
  background: #fff;
  padding: 18px;
}
.plans-image img {
  width: 100%;
}
.plans-copy p {
  max-width: 500px;
}

/* About */
.about {
  background: #fff;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.about-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}
.trust {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.trust span {
  border: 1px solid var(--line);
  padding: 10px 14px;
  font-weight: 800;
  color: var(--navy);
}

/* FAQ */
.faq {
  background: var(--soft);
}
.faq-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 55px;
}
.accordions details {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 19px 20px;
}
.accordions summary {
  font-weight: 900;
  color: var(--navy);
  cursor: pointer;
  font-size: 19px;
}
.accordions p {
  font-size: 17px;
  margin: 12px 0 0;
}

/* Contact */
.contact {
  background: var(--navy);
  color: #fff;
}
.contact-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.contact h2,
.contact p {
  color: #fff;
}
.contact form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.contact input,
.contact textarea {
  width: 100%;
  border: 0;
  padding: 15px 14px;
  font-size: 17px;
  border-radius: 4px;
}
.contact textarea,
.contact .white {
  grid-column: 1/-1;
}

/* Footer */
.footer {
  min-height: 105px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 18px;
}
.footer img {
  width: 170px;
}
.footer p {
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}
.footer small {
  text-align: right;
  color: var(--muted);
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 100;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  place-items: center;
  padding: 25px;
}
.lightbox.open {
  display: grid;
}
.lightbox img {
  max-width: 92vw;
  max-height: 82vh;
}
.lightbox button {
  position: absolute;
  right: 20px;
  top: 18px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  font-size: 30px;
}
.lightbox span {
  color: #fff;
}

@media (max-width: 1100px) {
  .nav nav,
  .nav-cta {
    display: none;
  }
  .menu {
    display: block;
    margin-left: auto;
  }
  .nav nav.open {
    display: flex;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 22px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
  }
  .nav nav.open a {
    padding: 12px 0;
    font-size: 18px;
  }
  .project-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .project-gallery .project-main {
    grid-column: 1/3;
    grid-row: auto;
  }
  .service-cards {
    grid-template-columns: 1fr 1fr;
  }
  .installation > .wrap,
  .plans-grid,
  .about-grid,
  .faq-grid,
  .contact-panel {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE V15 — referencia visual del cliente:
   1) foto primero
   2) texto mínimo sobre foto
   3) banda roja
   4) accesos tipo acordeón
   5) resto del sitio dominado por imágenes
   ========================================================= */
@media (max-width: 700px) {
  body {
    font-size: 22px;
  }
  .wrap {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }
  .nav {
    height: 68px;
  }
  .brand {
    width: 142px;
    flex-basis: 142px;
  }
  .nav nav.open {
    top: 68px;
    padding: 12px 14px;
  }
  .nav nav.open a {
    font-size: 20px;
    padding: 14px 0;
  }

  .desktop-hero {
    display: none;
  }
  .mobile-opening {
    display: block;
    background: #fff;
  }

  .mobile-hero-photo {
    position: relative;
    height: 64vh;
    min-height: 455px;
    max-height: 610px;
    overflow: hidden;
    background: #dfe4e8;
  }
  .mobile-hero-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* La referencia usa rótulos pequeños, no un párrafo grande */
  .mobile-corner-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 46%;
    min-height: 82px;
    padding: 13px 14px 16px;
    background: #fff;
    color: var(--blue);
    font-size: 17px;
    line-height: 1.15;
    font-weight: 900;
    display: flex;
    align-items: flex-start;
  }
  .mobile-corner-label:after {
    content: "";
    position: absolute;
    right: -54px;
    top: 0;
    border-top: 82px solid #fff;
    border-right: 54px solid transparent;
  }

  .mobile-callout {
    position: absolute;
    left: 0;
    bottom: 28px;
    width: 66%;
    padding: 16px 18px;
    background: rgba(5, 66, 128, 0.95);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  }
  .mobile-callout small {
    display: block;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;
    margin-bottom: 7px;
  }
  .mobile-callout strong {
    display: block;
    font-size: 27px;
    line-height: 1.02;
  }

  .mobile-red-band {
    background: var(--red);
    color: #fff;
    text-align: center;
    padding: 17px 18px;
    font-size: 18px;
    line-height: 1.35;
    font-style: italic;
  }

  .mobile-quick {
    border-bottom: 1px solid var(--line);
  }
  .mobile-quick a {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-bottom: 1px solid #d9e0e7;
    color: var(--blue);
    text-decoration: none;
    font-size: 17px;
    font-weight: 900;
    background: #fff;
  }
  .mobile-quick b {
    color: var(--red);
    font-size: 27px;
    line-height: 1;
  }

  .section {
    padding: 44px 0;
  }
  .section h2 {
    font-size: 34px;
    line-height: 1.08;
  }
  .section p {
    font-size: 22px;
    line-height: 1.55;
  }
  .eyebrow {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .visual-heading {
    margin-bottom: 18px;
    padding: 0;
  }

  /* Project section: image immediately after a short title */
  .project-gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 14px 8px;
  }
  .project-gallery::-webkit-scrollbar {
    display: none;
  }
  .project-gallery figure,
  .project-gallery .project-main {
    flex: 0 0 86%;
    height: 440px;
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: center;
  }
  .project-gallery figcaption {
    font-size: 18px;
    padding: 10px 12px;
  }
  .gallery-cta {
    width: 100%;
    min-height: 56px;
    font-size: 18px;
  }

  /* Service = big picture, almost no copy */
  .service-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 14px 8px;
  }
  .service-cards::-webkit-scrollbar {
    display: none;
  }
  .service-card {
    flex: 0 0 86%;
    min-height: 455px;
    scroll-snap-align: center;
  }
  .service-card h3 {
    font-size: 28px;
  }

  /* Installation: image before any explanation */
  .installation > .wrap {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .installation-image {
    order: 1;
  }
  .installation-image img {
    height: 470px;
  }
  .image-stamp {
    font-size: 21px;
    padding: 14px 16px;
  }
  .installation-copy {
    order: 2;
    padding: 28px 14px 0;
  }
  .installation-copy h2 {
    font-size: 32px;
  }
  .process-strip span {
    font-size: 21px;
    padding: 13px 0;
  }
  .process-strip b {
    width: 48px;
    height: 48px;
  }

  .plans-grid,
  .about-grid {
    gap: 24px;
  }
  .plans-image,
  .about-image {
    order: 1;
  }
  .plans-copy,
  .about-copy {
    order: 2;
  }
  .plans-image {
    padding: 0;
    margin-left: -14px;
    margin-right: -14px;
  }
  .plans-image img {
    width: 100%;
  }
  .about-image {
    margin-left: -14px;
    margin-right: -14px;
  }
  .about-image img {
    height: 430px;
  }

  .btn {
    font-size: 20px;
    min-height: 58px;
    width: 100%;
  }
  .trust {
    display: grid;
    grid-template-columns: 1fr;
  }
  .trust span {
    font-size: 20px;
  }

  .faq-grid {
    gap: 20px;
  }
  .accordions {
    margin-left: -14px;
    margin-right: -14px;
  }
  .accordions details {
    padding: 18px 14px;
  }
  .accordions summary {
    font-size: 22px;
  }
  .accordions p {
    font-size: 21px;
  }

  .contact-panel {
    gap: 26px;
  }
  .contact form {
    grid-template-columns: 1fr;
  }
  .contact input,
  .contact textarea {
    grid-column: 1;
    font-size: 20px;
    padding: 16px 14px;
  }
  .footer {
    grid-template-columns: 1fr;
    padding: 26px 0;
  }
  .footer p,
  .footer small {
    text-align: left;
    margin: 0;
  }
  .footer p {
    font-size: 18px;
  }
}

@media (max-width: 390px) {
  .mobile-hero-photo {
    height: 60vh;
    min-height: 430px;
  }
  .mobile-callout {
    width: 72%;
  }
  .mobile-callout strong {
    font-size: 25px;
  }
  .project-gallery figure,
  .project-gallery .project-main,
  .service-card {
    flex-basis: 90%;
  }
}

/* =========================================================
   V16 — MOBILE FIT / RESPONSIVE HARDENING
   NO cambia tamaños tipográficos.
   Objetivo: ningún bloque debe exceder el viewport.
   ========================================================= */

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
  }

  body > *,
  main,
  main > section,
  .site-header,
  footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* HEADER */
  .site-header {
    overflow: visible;
  }

  .nav {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .brand {
    width: 138px;
    max-width: 138px;
    flex: 0 1 138px;
    min-width: 0;
    overflow: hidden;
  }

  .brand img {
    width: 138px;
    max-width: 100%;
    height: auto;
  }

  .menu {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin-left: auto;
    padding: 0;
  }

  .nav nav.open {
    position: absolute;
    z-index: 1000;
    top: 68px;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    padding-left: 16px;
    padding-right: 16px;
  }

  /* MOBILE COVER */
  .mobile-opening {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .mobile-hero-photo {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4/5;
    overflow: hidden;
  }

  .mobile-hero-photo > img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
  }

  .mobile-corner-label {
    width: 44%;
    max-width: 180px;
    min-width: 132px;
  }

  .mobile-callout {
    left: 0;
    right: auto;
    width: min(72%, 300px);
    max-width: calc(100% - 18px);
  }

  .mobile-red-band,
  .mobile-quick {
    width: 100%;
    max-width: 100%;
  }

  .mobile-quick a {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 12px;
  }

  .mobile-quick a span {
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* GENERIC SECTION SAFETY */
  .section,
  .visual-heading,
  .projects,
  .services,
  .installation,
  .plans,
  .about,
  .faq,
  .contact {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .section h2,
  .section p,
  .installation-copy,
  .plans-copy,
  .about-copy,
  .contact-intro {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* HORIZONTAL VISUAL CAROUSELS:
     viewport owns the clipping; cards stay inside screen. */
  .project-gallery,
  .service-cards {
    width: calc(100% + 32px);
    max-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
  }

  .project-gallery figure,
  .project-gallery .project-main,
  .service-card {
    flex: 0 0 calc(100vw - 46px);
    width: calc(100vw - 46px);
    max-width: calc(100vw - 46px);
    min-width: 0;
  }

  .project-gallery figure,
  .project-gallery .project-main {
    height: auto;
    aspect-ratio: 4/5;
  }

  .service-card {
    min-height: 0;
    height: auto;
    aspect-ratio: 4/5;
  }

  .project-gallery img,
  .service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gallery-cta {
    width: 100%;
    max-width: 100%;
  }

  /* INSTALLATION */
  .installation > .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .installation-image,
  .installation-image img {
    width: 100%;
    max-width: 100%;
  }

  .installation-image img {
    height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
  }

  .installation-copy {
    width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .process-strip,
  .process-strip span {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .process-strip span {
    overflow-wrap: break-word;
  }

  /* PLANS + ABOUT */
  .plans-grid,
  .about-grid,
  .faq-grid,
  .contact-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .plans-image,
  .about-image {
    width: calc(100% + 32px);
    max-width: none;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  .plans-image img,
  .about-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }

  .about-image img {
    aspect-ratio: 4/5;
  }

  /* FAQ */
  .accordions {
    width: calc(100% + 32px);
    max-width: none;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  .accordions details,
  .accordions summary,
  .accordions p {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* FORM */
  .contact form,
  .contact input,
  .contact textarea,
  .contact button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* FOOTER */
  .footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* Phones like 320–390 CSS px */
@media (max-width: 390px) {
  .wrap {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .brand {
    width: 128px;
    max-width: 128px;
    flex-basis: 128px;
  }

  .brand img {
    width: 128px;
  }

  .mobile-corner-label {
    width: 43%;
    min-width: 122px;
  }

  .mobile-callout {
    width: 74%;
    max-width: calc(100% - 14px);
  }

  .project-gallery,
  .service-cards {
    width: calc(100% + 26px);
    margin-left: -13px;
    margin-right: -13px;
    padding-left: 13px;
    padding-right: 13px;
  }

  .project-gallery figure,
  .project-gallery .project-main,
  .service-card {
    flex-basis: calc(100vw - 38px);
    width: calc(100vw - 38px);
    max-width: calc(100vw - 38px);
  }

  .plans-image,
  .about-image,
  .accordions {
    width: calc(100% + 26px);
    margin-left: -13px !important;
    margin-right: -13px !important;
  }

  .installation-copy {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

/* =========================================================
   V17 — HIGH RES REAL ASSETS
   No typography changes. No layout redesign.
   The previous 650px/700px mock assets are no longer used
   in large mobile panels.
   ========================================================= */

.mobile-hero-photo > img {
  object-position: center 44%;
}

.desktop-hero-bg {
  object-position: center 46%;
}

.project-gallery img,
.service-card img,
.installation-image img,
.about-image img {
  image-rendering: auto;
  object-fit: cover;
}

/* Avoid browser enlargement artifacts on the real photos. */
@media (max-width: 700px) {
  .mobile-hero-photo > img,
  .project-gallery img,
  .service-card img,
  .installation-image img,
  .about-image img {
    transform: translateZ(0);
  }

  .service-card:nth-child(1) img {
    object-position: center center;
  }
  .service-card:nth-child(2) img {
    object-position: center center;
  }
  .service-card:nth-child(3) img {
    object-position: center center;
  }
}

/* V18 — galería fotográfica 2026. Las imágenes nuevas se usan exclusivamente aquí. */
.new-gallery {
  background: #f4f6f8;
  overflow: hidden;
}
.gallery-heading {
  max-width: 760px;
  margin-bottom: 30px;
}
.gallery-heading p {
  max-width: 680px;
  margin: 12px 0 0;
  color: #5d6874;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 250px;
  gap: 14px;
}
.gallery-item {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: #dfe4e8;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  border-radius: 3px;
  min-width: 0;
}
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  image-rendering: auto;
}
.gallery-item:hover img {
  transform: scale(1.025);
}
.gallery-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item.wide {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 240px;
    gap: 10px;
  }
  .gallery-item.featured {
    grid-column: span 2;
    grid-row: span 1;
  }
  .gallery-item.wide {
    grid-column: span 2;
  }
}
@media (max-width: 700px) {
  .new-gallery {
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .gallery-heading {
    margin-bottom: 22px;
  }
  .gallery-heading p {
    font-size: 22px;
    line-height: 1.45;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 155px;
    gap: 7px;
  }
  .gallery-item {
    border-radius: 2px;
  }
  .gallery-item.featured {
    grid-column: span 2;
    grid-row: span 2;
  }
  .gallery-item.wide {
    grid-column: span 2;
    grid-row: span 1;
  }
  .gallery-item:nth-child(4),
  .gallery-item:nth-child(10),
  .gallery-item:nth-child(16) {
    grid-row: span 2;
  }
}
@media (max-width: 390px) {
  .gallery-grid {
    grid-auto-rows: 140px;
    gap: 6px;
  }
}

/* =========================================================
   V19 — ESTRUCTURA BASADA EN LA ÚLTIMA REFERENCIA DEL CLIENTE
   Se conserva el logotipo original de Nichos PR.
   ========================================================= */
:root {
  --cyan: #12cfe2;
  --cyan-dark: #00a8c1;
  --deep: #06285a;
}

.brand-showcase {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #e9f6ff;
}
.brand-showcase-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(238, 250, 255, 0.78), rgba(255, 255, 255, 0.3)),
    url("assets/real/project-06.webp") center 22% / cover no-repeat;
  filter: saturate(0.92) brightness(1.12);
}
.brand-showcase-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(221, 245, 255, 0.25),
    rgba(240, 250, 255, 0.74)
  );
}
.brand-showcase-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 285px;
  gap: 58px;
  align-items: center;
}
.brand-showcase-logo {
  width: min(650px, 70vw);
  margin-left: auto;
  margin-right: 10px;
  filter: drop-shadow(0 4px 9px rgba(2, 31, 73, 0.08));
}
.brand-showcase-message {
  border-left: 1px solid rgba(6, 40, 90, 0.45);
  padding-left: 42px;
  color: var(--deep);
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  line-height: 1.55;
}
.brand-showcase-message strong {
  font-weight: 800;
}
.brand-showcase-message:after {
  content: "";
  width: 58px;
  height: 4px;
  background: var(--cyan);
  margin-top: 15px;
}

.v19-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 5px 22px rgba(4, 42, 82, 0.08);
  border: 0;
}
.v19-header .nav {
  height: 74px;
}
.v19-header .brand {
  width: 255px;
  flex: 0 0 255px;
  border-right: 1px solid #b7c5d4;
  padding-right: 28px;
}
.v19-header .nav nav {
  gap: 30px;
}
.v19-header .nav nav a {
  font-size: 18px;
  color: var(--deep);
  letter-spacing: 0.04em;
  position: relative;
  padding: 24px 0 20px;
}
.v19-header .nav nav a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 3px;
  background: var(--cyan);
  transform: scaleX(0);
  transition: 0.2s;
}
.v19-header .nav nav a:hover:after {
  transform: scaleX(1);
}
.v19-header .nav-cta {
  background: var(--cyan);
  color: #032652;
  border-radius: 7px;
  padding: 15px 25px;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(18, 207, 226, 0.18);
}

.reference-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: #f5fafc;
}
.reference-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.reference-hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #fff 0%,
    rgba(255, 255, 255, 0.97) 20%,
    rgba(255, 255, 255, 0.84) 38%,
    rgba(255, 255, 255, 0.28) 59%,
    rgba(255, 255, 255, 0) 76%
  );
}
.reference-hero-inner {
  position: relative;
  z-index: 2;
  min-height: 520px;
  display: flex;
  align-items: center;
}
.reference-copy {
  width: 610px;
  padding: 35px 0 38px;
}
.reference-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cyan-dark);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.09em;
  margin-bottom: 15px;
          color: var(--ink);
}
.reference-kicker i {
  width: 83px;
  height: 1px;
  background: #6b7f95;
  display: block;
}
.reference-copy h1 {
  margin: 0;
  color: var(--deep);
  font-size: 62px;
  line-height: 0.88;
  letter-spacing: -2px;
  font-weight: 900;
}
.reference-copy h1 strong {
  display: block;
  font-weight: 900;
}
.reference-copy h1 em {
  display: block;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: 0.07em;
  font-style: normal;
  font-weight: 400;
  margin-top: 10px;
}
.reference-rule {
  width: 61px;
  height: 4px;
  background: var(--cyan);
  margin: 16px 0 16px;
  
}
.reference-copy p {
  color: #183759;
  font-size: 21px;
  line-height: 1.36;
  max-width: 495px;
  margin: 0;
  font-weight: 900;
}
.reference-actions {
  display: flex;
  gap: 12px;
  margin-top: 27px;
}
.reference-primary,
.reference-secondary {
  min-height: 57px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 27px;
  border-radius: 7px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.reference-primary {
  background: var(--cyan);
  color: #032652;
  min-width: 282px;
}
.reference-primary b {
  font-size: 26px;
  margin-left: 18px;
  font-weight: 400;
}
.reference-secondary {
  border: 2px solid var(--deep);
  color: var(--deep);
  background: rgba(255, 255, 255, 0.8);
  min-width: 200px;
}

.reference-benefits {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -3px 20px rgba(5, 44, 85, 0.08);
  border-top: 1px solid #dce7ee;
  border-bottom: 1px solid #dce7ee;
}
.reference-benefits-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 104px;
  align-items: center;
}
.benefit {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 42px;
  border-right: 1px solid #aebdca;
  color: var(--deep);
  font-weight: 900;
}
.benefit:last-child {
  border-right: 0;
}
.benefit-icon {
  font-size: 41px;
  line-height: 1;
  color: var(--deep);
}
.benefit strong {
  display: block;
  font-size: 16px;
  letter-spacing: 0.12em;
  line-height: 1.25;
  font-weight: 900;
}
.benefit i {
  display: block;
  width: 45px;
  height: 4px;
  background: var(--cyan);
  margin-top: 12px;
}

/* Bring the same component language into the rest of the site */
.eyebrow {
  color: var(--ink) !important;
  border-bottom-color: var(--cyan) !important;
  font-weight: 900;
}
.gallery-cta {
  border-color: var(--deep) !important;
  color: var(--deep) !important;
  border-radius: 5px;
}
.service-card div {
  border-left: 4px solid var(--cyan);
  padding-left: 15px;
}
.image-stamp {
  background: var(--cyan) !important;
  color: var(--deep) !important;
}
.process-strip b {
  background: var(--cyan) !important;
  color: var(--deep) !important;
}
.trust span {
  border-color: #b9d8e2 !important;
}

@media (max-width: 1100px) {
  .brand-showcase {
    height: 180px;
  }
  .brand-showcase-inner {
    grid-template-columns: 1fr 225px;
    gap: 30px;
  }
  .brand-showcase-message {
    font-size: 15px;
    padding-left: 26px;
  }
  .v19-header .brand {
    width: 200px;
    flex-basis: 200px;
  }
  .v19-header .nav nav {
    display: none;
  }
  .v19-header .menu {
    display: block;
    margin-left: auto;
  }
  .v19-header .nav-cta {
    margin-left: auto;
  }
  .v19-header .nav nav.open {
    display: flex;
    top: 74px;
  }
  .reference-copy {
    width: 560px;
  }
  .reference-copy h1 {
    font-size: 55px;
  }
  .reference-copy h1 em {
    font-size: 33px;
  }
  .benefit {
    padding: 0 20px;
  }
}

@media (max-width: 700px) {
  /* compact version of the same structure, keeping the page visual-first */
  .brand-showcase {
    height: 126px;
  }
  .brand-showcase-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px !important;
  }
  .brand-showcase-logo {
    width: min(315px, 88vw);
    margin: 0;
  }
  .brand-showcase-message {
    display: none;
  }

  .v19-header .nav {
    height: 68px;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .v19-header .brand {
    width: 145px;
    max-width: 145px;
    flex: 0 1 145px;
    padding-right: 16px;
  }
  .v19-header .nav-cta {
    display: none;
  }
  .v19-header .nav nav.open {
    top: 68px;
  }

  .reference-hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
  }
  .reference-hero-bg {
    position: relative;
    order: 1;
    height: auto;
    aspect-ratio: 4/3;
    object-position: center 50%;
  }
  .reference-hero-wash {
    display: none;
  }
  .reference-hero-inner {
    order: 2;
    min-height: 0;
    width: 100% !important;
    padding: 0 !important;
  }
  .reference-copy {
    width: 100%;
    padding: 27px 17px 30px;
    background: #fff;
  }
  .reference-kicker {
    font-size: 13px;
    gap: 10px;
    margin-bottom: 12px;
  }
  .reference-kicker i {
    width: 45px;
  }
  .reference-copy h1 {
    font-size: 43px;
    line-height: 0.9;
    letter-spacing: -1.2px;
  }
  .reference-copy h1 em {
    font-size: 27px;
    line-height: 1.16;
    letter-spacing: 0.05em;
    margin-top: 8px;
  }
  .reference-copy p {
    font-size: 21px;
    line-height: 1.45;
    max-width: none;
  }
  .reference-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .reference-primary,
  .reference-secondary {
    width: 100%;
    min-width: 0;
    font-size: 18px;
    min-height: 58px;
  }

  .reference-benefits-inner {
    display: block;
    min-height: 0;
    padding: 0 !important;
  }
  .benefit {
    height: auto;
    min-height: 71px;
    border-right: 0;
    border-bottom: 1px solid #d8e2e9;
    padding: 12px 18px;
    gap: 16px;
  }
  .benefit:last-child {
    border-bottom: 0;
  }
  .benefit-icon {
    font-size: 34px;
    min-width: 42px;
  }
  .benefit strong {
    font-size: 15px;
    letter-spacing: 0.09em;
  }
  .benefit i {
    margin-top: 8px;
    height: 3px;
  }
}

/* =========================================================
   V20 — ajuste fiel de proporciones a la referencia
   ========================================================= */

/* Banner superior: más compacto y con menos aire muerto */
.brand-showcase {
  height: 190px !important;
}
.brand-showcase-bg {
  background-position: center 43% !important;
  opacity: 0.72;
}
.brand-showcase-inner {
  grid-template-columns: minmax(0, 1fr) 255px !important;
  gap: 38px !important;
  max-width: 1120px !important;
}
.brand-showcase-logo {
  width: min(635px, 68vw) !important;
  max-height: 130px;
  object-fit: contain;
  margin: 0 auto !important;
}
.brand-showcase-message {
  padding-left: 34px !important;
  font-size: 17px !important;
  line-height: 1.48 !important;
}

/* Menú: compacto, horizontal y pegado al hero */
.v19-header .nav {
  height: 72px !important;
  max-width: 1200px !important;
}
.v19-header .brand {
  width: 255px !important;
  flex-basis: 255px !important;
  padding-right: 28px !important;
}
.v19-header .brand img {
  width: 100% !important;
  max-height: 44px !important;
  object-fit: contain !important;
}
.v19-header .nav nav {
  flex: 1;
  justify-content: center;
  gap: 28px !important;
}
.v19-header .nav nav a {
  padding: 26px 0 22px !important;
  white-space: nowrap;
}
.v19-header .nav-cta {
  min-width: 190px;
  text-align: center;
  padding: 15px 21px !important;
}

/* Hero: panorámico; evita el zoom excesivo que tenía V19 */
.reference-hero {
  min-height: 500px !important;
  height: 500px;
}
.reference-hero-bg {
  object-fit: cover !important;
  object-position: center 52% !important;
}
.reference-hero-wash {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.96) 18%,
    rgba(255, 255, 255, 0.88) 31%,
    rgba(255, 255, 255, 0.65) 42%,
    rgba(255, 255, 255, 0.2) 57%,
    rgba(255, 255, 255, 0) 72%
  ) !important;
}
.reference-hero-inner {
  min-height: 500px !important;
  max-width: 1200px !important;
}
.reference-copy {
  width: 545px !important;
  padding: 30px 0 32px !important;
}
.reference-kicker {
  font-size: 14px !important;
  margin-bottom: 14px !important;
}
.reference-copy h1 {
  font-size: 58px !important;
  line-height: 0.89 !important;
}
.reference-copy h1 em {
  font-size: 35px !important;
  margin-top: 9px !important;
}
.reference-copy p {
  max-width: 475px !important;
  font-size: 20px !important;
}
.reference-actions {
  margin-top: 24px !important;
}
.reference-primary,
.reference-secondary {
  min-height: 55px !important;
}

/* Barra de beneficios inmediatamente pegada al hero */
.reference-benefits {
  position: relative;
  z-index: 3;
}
.reference-benefits-inner {
  min-height: 94px !important;
  max-width: 1200px !important;
}
.benefit {
  height: 56px !important;
  padding: 0 34px !important;
}

/* Tablet */
@media (min-width: 701px) and (max-width: 1100px) {
  .brand-showcase {
    height: 165px !important;
  }
  .brand-showcase-inner {
    grid-template-columns: minmax(0, 1fr) 205px !important;
  }
  .brand-showcase-logo {
    width: min(520px, 65vw) !important;
  }
  .reference-hero,
  .reference-hero-inner {
    height: 475px;
    min-height: 475px !important;
  }
  .reference-copy {
    width: 505px !important;
  }
  .reference-copy h1 {
    font-size: 51px !important;
  }
  .reference-copy h1 em {
    font-size: 31px !important;
  }
}

/* Mobile: misma arquitectura visual, no una reinterpretación */
@media (max-width: 700px) {
  .brand-showcase {
    height: 108px !important;
    border-top: 5px solid #1f2933;
  }
  .brand-showcase-bg {
    background-position: center 42% !important;
  }
  .brand-showcase-inner {
    padding: 0 16px !important;
  }
  .brand-showcase-logo {
    width: min(290px, 82vw) !important;
    max-height: 78px !important;
  }

  .v19-header .nav {
    height: 64px !important;
  }
  .v19-header .brand {
    width: 142px !important;
    flex-basis: 142px !important;
    padding-right: 14px !important;
  }
  .v19-header .brand img {
    max-height: 37px !important;
  }
  .v19-header .nav nav.open {
    top: 64px !important;
  }

  /* En celular la foto sigue siendo lo primero visual del hero,
     pero conservando el mismo hero y no creando otra sección. */
  .reference-hero {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto;
  }
  .reference-hero-bg {
    position: relative !important;
    grid-row: 1;
    width: 100% !important;
    height: 245px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center 50% !important;
  }
  .reference-hero-wash {
    display: none !important;
  }
  .reference-hero-inner {
    grid-row: 2;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .reference-copy {
    width: 100% !important;
    padding: 25px 18px 28px !important;
  }
  .reference-kicker {
    font-size: 13px !important;
    letter-spacing: 0.065em !important;
    
  }
  .reference-copy h1 {
    font-size: 42px !important;
    line-height: 0.9 !important;
  }
  .reference-copy h1 em {
    font-size: 27px !important;
    line-height: 1.18 !important;
  }
  .reference-copy p {
    font-size: 21px !important;
    line-height: 1.43 !important;
  }

  .reference-benefits-inner {
    display: block !important;
  }
  .benefit {
    min-height: 68px !important;
    height: auto !important;
    padding: 11px 18px !important;
  }
}

/* =========================================================
   V21 — Header con fotografía real, SIN degradiente.
   ========================================================= */

/* Desactiva por completo el fondo/degradado anterior */
.brand-showcase-bg {
  display: none !important;
}

.brand-showcase {
  position: relative;
  height: 190px !important;
  overflow: hidden;
  background: #eef5f8 !important;
}

/* Fotografía real de fondo, como la referencia */
.brand-showcase-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  filter: none !important;
}

/* Capa blanca UNIFORME: no es gradiente */
.brand-showcase-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.72);
}

.brand-showcase-inner {
  position: relative;
  z-index: 2;
}

.brand-showcase-logo {
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.88))
    drop-shadow(0 2px 8px rgba(2, 31, 73, 0.08)) !important;
}

.brand-showcase-message {
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 1100px) {
  .brand-showcase-photo {
    object-position: center 45%;
  }
}

@media (max-width: 700px) {
  .brand-showcase {
    height: 108px !important;
  }
  .brand-showcase-photo {
    object-position: center 45%;
  }
  .brand-showcase-veil {
    background: rgba(255, 255, 255, 0.76);
  }
}

/* =========================================================
   V22 — corrección visual basada en la captura real
   ========================================================= */

/* HEADER SUPERIOR
   Foto panorámica real, sin gradiente y con una sola capa blanca uniforme. */
.brand-showcase {
  height: 188px !important;
  background: #eef4f6 !important;
}
.brand-showcase-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 44% !important;
  filter: none !important;
}
.brand-showcase-veil {
  background: rgba(255, 255, 255, 0.64) !important;
}
.brand-showcase-inner {
  max-width: 1120px !important;
}
.brand-showcase-logo {
  width: min(625px, 67vw) !important;
  max-height: 125px !important;
}
.brand-showcase-message {
  background: transparent !important;
}

/* MAIN HERO
   La captura mostraba un nicho demasiado acercado. Usamos una panorámica
   completa de cementerio para replicar la composición del ejemplo. */
.reference-hero {
  height: 500px !important;
  min-height: 500px !important;
}
.reference-hero-bg {
  object-fit: cover !important;
  object-position: center 45% !important;
}

/* El degradado pertenece al hero, no al header: más corto y sutil. */
.reference-hero-wash {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.95) 19%,
    rgba(255, 255, 255, 0.8) 32%,
    rgba(255, 255, 255, 0.46) 44%,
    rgba(255, 255, 255, 0.08) 56%,
    rgba(255, 255, 255, 0) 64%
  ) !important;
}
.reference-copy {
  width: 525px !important;
}
.reference-copy h1 {
  font-size: 56px !important;
}
.reference-copy h1 em {
  font-size: 34px !important;
}
.reference-copy p {
  max-width: 455px !important;
}

/* Make nav visually closer to the reference */
.v19-header {
  box-shadow: 0 4px 13px rgba(3, 34, 68, 0.08) !important;
}
.v19-header .nav {
  height: 70px !important;
}
.v19-header .brand {
  width: 250px !important;
  flex-basis: 250px !important;
}
.v19-header .nav-cta {
  border-radius: 7px !important;
  min-width: 190px !important;
}

/* Benefits stay attached to hero */
.reference-benefits-inner {
  min-height: 96px !important;
}

/* PHONE */
@media (max-width: 700px) {
  .brand-showcase {
    height: 106px !important;
  }
  .brand-showcase-photo {
    object-position: center 45% !important;
  }
  .brand-showcase-veil {
    background: rgba(255, 255, 255, 0.68) !important;
  }
  .brand-showcase-logo {
    width: min(285px, 82vw) !important;
    max-height: 76px !important;
  }

  .reference-hero-bg {
    height: 270px !important;
    object-position: center 48% !important;
  }
  .reference-copy {
    width: 100% !important;
  }
}

/* =========================================================
   V23 — UNA SOLA IMAGEN CONTINUA: branding + menú + hero
   ========================================================= */

.top-visual-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #eaf3f6;
}

.top-visual-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("assets/real/project-18.webp");
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}

/* Ya no existen imágenes distintas dentro del banner/hero */
.brand-showcase-photo,
.reference-hero-bg {
  display: none !important;
}

/* El bloque superior deja ver la MISMA fotografía, sin gradiente */
.brand-showcase {
  position: relative !important;
  height: 188px !important;
  background: transparent !important;
}
.brand-showcase-veil {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: rgba(255, 255, 255, 0.68) !important;
}
.brand-showcase-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* El menú funciona como la franja blanca del ejemplo.
   La fotografía continúa físicamente detrás de él. */
.top-visual-shell .v19-header {
  position: relative !important;
  top: auto !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border: 0 !important;
  box-shadow: 0 3px 12px rgba(2, 35, 72, 0.08) !important;
}

/* El hero no carga una segunda imagen: es transparente sobre el mismo fondo */
.top-visual-shell .reference-hero {
  position: relative !important;
  height: 500px !important;
  min-height: 500px !important;
  background: transparent !important;
}

/* Solo el hero tiene el velo lateral de lectura, tal como la referencia.
   No cambia la fotografía: la misma sigue debajo. */
.top-visual-shell .reference-hero-wash {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.96) 18%,
    rgba(255, 255, 255, 0.84) 31%,
    rgba(255, 255, 255, 0.54) 43%,
    rgba(255, 255, 255, 0.12) 56%,
    rgba(255, 255, 255, 0) 65%
  ) !important;
}
.top-visual-shell .reference-hero-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* Reencuadre del fondo general: se muestra más paisaje y menos acercamiento */
@media (min-width: 1101px) {
  .top-visual-photo {
    background-size: cover;
    background-position: center 47%;
  }
}

/* Tablet */
@media (min-width: 701px) and (max-width: 1100px) {
  .top-visual-photo {
    background-position: center 47%;
  }
}

/* Mobile: una sola imagen sigue cubriendo las tres zonas.
   No se crea otra fotografía. */
@media (max-width: 700px) {
  .top-visual-shell {
    overflow: visible;
  }

  .top-visual-photo {
    background-position: center top;
    background-size: auto 620px;
    background-color: #eaf3f6;
  }

  .brand-showcase {
    height: 108px !important;
  }

  .brand-showcase-veil {
    background: rgba(255, 255, 255, 0.7) !important;
  }

  .top-visual-shell .v19-header {
    position: relative !important;
  }

  .top-visual-shell .reference-hero {
    height: 490px !important;
    min-height: 490px !important;
    display: block !important;
    background: transparent !important;
  }

  .top-visual-shell .reference-hero-inner {
    min-height: 490px !important;
    height: 490px !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .top-visual-shell .reference-hero-wash {
    display: block !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.12) 22%,
      rgba(255, 255, 255, 0.88) 50%,
      rgba(255, 255, 255, 0.98) 68%,
      rgba(255, 255, 255, 1) 100%
    ) !important;
  }

  .reference-copy {
    position: relative !important;
    z-index: 2 !important;
    padding: 175px 17px 26px !important;
    background: transparent !important;
  }
}

/* =========================================================
   V24 — SIN VEIL/GRADIENTE EN HEADER + FONDO HD + GALERÍA
   ========================================================= */

/* Una sola imagen HD para banner + menú + hero */
.top-visual-photo {
  background-image: url("assets/top-background.png") !important;
  background-size: cover !important;
  background-position: center 48% !important;
}

/* Header superior: CERO gradiente / CERO velo */
.brand-showcase {
  background: transparent !important;
}
.brand-showcase-veil {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* El logo recibe una placa blanca translúcida muy ligera, NO un gradiente,
   para conservar legibilidad sin lavar toda la fotografía. */
.brand-showcase-logo {
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.9));
}
.brand-showcase-message {
  background: rgba(255, 255, 255, 0.72) !important;
  padding: 12px 18px !important;
  border-radius: 4px !important;
}

/* Galería como la referencia del cliente: limpia, visual, 3 columnas, sin tarjetas/texto */
.client-gallery {
  background: #fff !important;
  padding: 76px 0 90px !important;
}
.gallery-heading {
  margin-bottom: 30px;
}
.gallery-heading h2 {
  margin: 6px 0 0;
}
.client-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.gallery-tile {
  display: block;
  width: 100%;
  height: 0;
  padding: 0 0 112%;
  position: relative;
  overflow: hidden;
  border: 0;
  background: #eef2f4;
  cursor: pointer;
}
.gallery-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.28s ease;
}
.gallery-tile:hover img {
  transform: scale(1.025);
}

/* WhatsApp flotante */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: #25d366;
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.whatsapp-float svg {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}
.whatsapp-float:hover {
  transform: translateY(-2px);
}

/* Lightbox simple para la nueva galería */
.client-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.9);
}
.client-lightbox.open {
  display: flex;
}
.client-lightbox img {
  max-width: min(1200px, 94vw);
  max-height: 90vh;
  object-fit: contain;
}
.client-lightbox button {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  font-size: 28px;
  cursor: pointer;
}

@media (max-width: 700px) {
  .top-visual-photo {
    background-size: auto 650px !important;
    background-position: center top !important;
  }
  .client-gallery {
    padding: 48px 0 64px !important;
  }
  .client-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gallery-tile {
    padding-bottom: 118%;
  }
  .whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    justify-content: center;
  }
  .whatsapp-float span {
    display: none;
  }
}

/* =========================================================
   V25 — MOBILE HERO FIX
   Mantiene más foto arriba sin cortar el contenido.
   ========================================================= */
@media (max-width: 700px) {
  .top-visual-shell .reference-hero {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  .top-visual-shell .reference-hero-inner {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
  }

  /* Ventana de foto antes del título */
  .reference-copy {
    width: 100% !important;
    margin-top: 235px !important;
    padding: 22px 17px 30px !important;
    position: relative !important;
    z-index: 2 !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.94) 22%,
      rgba(255, 255, 255, 1) 52%
    ) !important;
  }

  /* Evita que PREFABRICADOS se corte a la derecha */
  .reference-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(36px, 9.2vw, 42px) !important;
    line-height: 0.94 !important;
    letter-spacing: -1.2px !important;
    overflow: visible !important;
  }

  .reference-copy h1 strong {
    display: block !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .reference-copy h1 em {
    font-size: clamp(25px, 6.8vw, 29px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.03em !important;
  }

  .reference-copy p {
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
  }

  .reference-actions {
    margin-top: 22px !important;
  }

  /* Beneficios después de todo el contenido */
  .reference-benefits {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   APPROVED MOBILE PATCH
   Solo cambios solicitados:
   1) nuevo logo NPR / NICHOS PR en móvil
   2) marca del menú: NICHOS azul + PR turquesa
   Todo lo demás se conserva.
   ========================================================= */

@media (max-width: 700px) {
  /* Header móvil: usa el logo nuevo aprobado */
  .v19-header .brand {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: none !important;
    overflow: visible !important;
  }

  .v19-header .brand img {
    display: block !important;
    content: url("assets/logo-npr-nichos-pr.png") !important;
    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;
    max-height: 72px !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: none !important;
  }

  /* Por si versiones anteriores creaban NICHOS / PR con pseudo-elementos */
  .v19-header .brand::before,
  .v19-header .brand::after {
    content: none !important;
    display: none !important;
  }
}

/* Marca tipográfica del menú de escritorio:
   NICHOS azul + PR turquesa */
@media (min-width: 701px) {
  .v19-header .brand {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding-right: 28px !important;
    border-right: 1px solid #b7c5d4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .v19-header .brand img {
    display: none !important;
  }

  .v19-header .brand::before {
    content: "NICHOS";
    display: inline-block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 31px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -1.3px !important;
    color: #062b67 !important;
  }

  .v19-header .brand::after {
    content: "PR";
    display: inline-block !important;
    margin-left: 8px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 31px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -1.3px !important;
    color: #20c7d9 !important;
  }
}

/* =========================================================
   MOBILE MENU WORDMARK FIX
   El showcase superior conserva el logo NPR gráfico.
   La barra blanca de navegación muestra NICHOS PR tipográfico.
   ========================================================= */
@media (max-width: 700px) {
  .nav .nav-wordmark {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 22px 0 0 !important;
    margin: 0 !important;
    border-right: 1px solid #b8c5d3 !important;
    background: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .nav .nav-wordmark img {
    display: none !important;
  }

  .nav .nav-wordmark::before {
    content: "NICHOS" !important;
    display: inline-block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 29px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -1.2px !important;
    color: #062b67 !important;
  }

  .nav .nav-wordmark::after {
    content: "PR" !important;
    display: inline-block !important;
    margin-left: 7px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 29px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -1.2px !important;
    color: #20c7d9 !important;
  }
}


/* =========================================================
   CONTACT FORM V2 — basado en la referencia del cliente
   ========================================================= */

.contact-panel-v2{
  grid-template-columns:.8fr 1.2fr!important;
  align-items:start!important;
}

.quote-form-v2{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:16px!important;
}

.field-v2{
  position:relative;
}

.field-v2 label{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.field-v2 input,
.field-v2 select{
  width:100%!important;
  min-height:66px!important;
  border:0!important;
  border-bottom:3px solid #6b6b6b!important;
  border-radius:0!important;
  background:#f1f1f1!important;
  color:#082f63!important;
  padding:0 22px!important;
  font-size:22px!important;
  font-weight:800!important;
  outline:none!important;
  box-shadow:none!important;
}

.field-v2 input::placeholder{
  color:#a8a8a8!important;
  opacity:1!important;
  font-weight:500!important;
}

.field-v2 select{
  appearance:auto;
  cursor:pointer;
}

.field-v2 input:focus,
.field-v2 select:focus{
  border-bottom-color:#1f4f9f!important;
  background:#f7f7f7!important;
}

.quote-submit-v2{
  width:min(440px,100%)!important;
  min-height:66px!important;
  margin:10px auto 0!important;
  border:0!important;
  border-radius:36px!important;
  background:#294f9f!important;
  color:#fff!important;
  font-size:23px!important;
  font-weight:900!important;
  cursor:pointer!important;
}

.quote-submit-v2:hover{
  filter:brightness(.96);
}

@media(max-width:700px){
  .contact-panel-v2{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }

  .quote-form-v2{
    gap:12px!important;
  }

  .field-v2 input,
  .field-v2 select{
    min-height:58px!important;
    padding:0 16px!important;
    font-size:20px!important;
  }

  .quote-submit-v2{
    min-height:58px!important;
    font-size:20px!important;
    border-radius:30px!important;
  }
}


/* =========================================================
   PROYECTOS REALIZADOS — municipios de la web anterior
   ========================================================= */
.municipios-projects{
  background:#fff;
  padding:0;
}

.municipios-accordion{
  border:0;
}

.municipios-accordion summary{
  list-style:none;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:0 22px;
  color:#174b93;
  background:#fff;
  font-size:25px;
  font-weight:900;
  cursor:pointer;
  border-top:1px solid #e7e7e7;
  border-bottom:1px solid #e7e7e7;
}

.municipios-accordion summary::-webkit-details-marker{
  display:none;
}

.municipios-arrow{
  width:0;
  height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:16px solid #c60018;
  transition:transform .2s ease;
}

.municipios-accordion[open] .municipios-arrow{
  transform:rotate(180deg);
}

.municipios-panel{
  background:#24519a;
  color:#fff;
  padding:34px 42px 28px;
}

.municipios-panel h3{
  margin:0 0 22px;
  text-align:center;
  color:#fff;
  font-size:23px;
  line-height:1.25;
  font-style:italic;
  font-weight:800;
}

.municipios-grid{
  margin:0 auto;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px 34px;
  max-width:920px;
}

.municipios-grid li{
  position:relative;
  padding-left:15px;
  color:#fff;
  font-size:18px;
  line-height:1.25;
  font-weight:700;
}

.municipios-grid li::before{
  content:"▲";
  position:absolute;
  left:0;
  top:1px;
  font-size:8px;
  color:#fff;
}

.municipios-more{
  margin:22px 0 0!important;
  text-align:center;
  color:#fff!important;
  font-size:20px!important;
  font-style:italic;
  font-weight:800!important;
}

@media(max-width:700px){
  .municipios-projects .wrap{
    width:100%!important;
    padding:0!important;
  }

  .municipios-accordion summary{
    min-height:64px;
    padding:0 14px;
    font-size:21px;
    justify-content:space-between;
  }

  .municipios-panel{
    padding:28px 18px 24px;
  }

  .municipios-panel h3{
    font-size:18px;
    margin-bottom:18px;
  }

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

  .municipios-grid li{
    font-size:13px;
    line-height:1.2;
    padding-left:11px;
  }

  .municipios-grid li::before{
    font-size:6px;
    top:2px;
  }

  .municipios-more{
    font-size:16px!important;
    margin-top:18px!important;
  }
}

@media(max-width:390px){
  .municipios-grid{
    gap:5px 8px;
  }
  .municipios-grid li{
    font-size:12px;
  }
}


/* =========================================================
   FIX V2 REAL — CONTACTO + FLECHA PROYECTOS
   ========================================================= */

/* CONTACTO: contraste fuerte sobre fondo azul */
#contacto .contact-intro .eyebrow,
#contacto .contact-intro .eyebrow.light {
  color:#34d3e3 !important;
  border-bottom-color:#34d3e3 !important;
  opacity:1 !important;
  font-weight:900 !important;
}

#contacto .contact-intro h2 {
  color:#ffffff !important;
  opacity:1 !important;
  font-weight:900 !important;
}

#contacto .contact-intro p {
  color:#ffffff !important;
  opacity:1 !important;
  font-weight:700 !important;
}

#contacto .field-v2 input,
#contacto .field-v2 select {
  color:#082f63 !important;
  background:#f3f3f3 !important;
  font-weight:800 !important;
}

#contacto .field-v2 input::placeholder {
  color:#858585 !important;
  opacity:1 !important;
  font-weight:700 !important;
}

/* PROYECTOS REALIZADOS: chevron azul, sin triángulo rojo */
.municipios-arrow {
  width:14px !important;
  height:14px !important;
  border:0 !important;
  border-right:4px solid #174b93 !important;
  border-bottom:4px solid #174b93 !important;
  background:transparent !important;
  transform:rotate(45deg) !important;
  transition:transform .2s ease !important;
  flex:0 0 14px !important;
}

.municipios-accordion[open] .municipios-arrow {
  transform:rotate(225deg) !important;
}

@media(max-width:700px){
  #contacto .contact-intro .eyebrow,
  #contacto .contact-intro .eyebrow.light {
    color:#34d3e3 !important;
  }

  #contacto .contact-intro h2,
  #contacto .contact-intro p {
    color:#ffffff !important;
  }
}