/* ===============================
   GUARNER · Gamma style (fino)
   =============================== */

html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; }

:root{
  --gamma-red:#CE112D;
  --gamma-black:#111;
  --line:#e7e7e7;
  --muted:#666;
  --bg:#fff;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
  line-height: 1.5;
  background: var(--bg);
}

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

/* HEADER */
.header{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 18px 0;
}
.brand-logo{
  height: 30px;      /* tamaño recomendado */
  width:auto;
  display:block;
}

/* NAV con subrayado rojo (como gamma) */
.nav{
  display:flex;
  gap: 18px;
  align-items:center;
}
.nav a{
  position:relative;
  text-decoration:none;
  color:#111;
  font-size:16px;
  padding: 8px 2px;
  font-weight: 600;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:2px;
  background: var(--gamma-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.nav a:hover::after,
.nav a.active::after{ transform: scaleX(1); }

/* HERO */
.hero-escaparate{
  position:relative;
  width:100%;
  height: 78vh;
  overflow:hidden;
}
.hero-escaparate img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-overlay{
  position:absolute;
  top: 60px;
  left: 60px;
  background: rgba(255,255,255,0.92);
  padding: 22px 26px;
  max-width: 420px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.hero-overlay h1{
  font-size: 26px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.hero-overlay p{
  font-size: 14px;
  margin-bottom: 14px;
  color:#333;
}

/* BOTONES */
.btn-primary{
  display:inline-block;
  background: var(--gamma-red);
  color:#fff;
  padding: 12px 22px;
  text-decoration:none;
  font-weight: 700;
  border: 2px solid var(--gamma-red);
}
.btn-secondary{
  display:inline-block;
  background: transparent;
  border: 2px solid var(--gamma-red);
  color: var(--gamma-red);
  padding: 12px 22px;
  text-decoration:none;
  font-weight: 700;
}

/* BANNER EXPERTISE (B) */
.expertise-band{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding: 34px 0;
}
.expertise-band-inner{
  text-align:center;
}
.expertise-title{
  color: var(--gamma-red);
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.expertise-list{
  color:#111;
  font-size: 20px;
}
.slash{ color: var(--gamma-red); font-weight: 900; padding: 0 10px; }

/* SECTION HEAD */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin: 28px 0 18px;
}
.section-head h2{
  font-size: 26px;
  letter-spacing: -0.02em;
}
.section-sub{
  color: var(--muted);
  font-size: 13px;
}

/* PRODUCTS */
.products{ padding: 22px 0 10px; }
.product-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  padding-bottom: 24px;
}
.product-card{
  border:1px solid var(--line);
  text-decoration:none;
  color:#111;
  background:#fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}
.product-card img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
}
.product-card h3{
  margin: 14px 16px 6px;
  font-size: 18px;
}
.product-card p{
  margin: 0 16px 16px;
  color:#555;
  font-size: 14px;
}

/* SERVICES */
.services{
  padding: 18px 0 6px;
  border-top: 1px solid var(--line);
}
.service-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding-bottom: 20px;
}
.service-card{
  border:1px solid var(--line);
  background:#fff;
  padding: 16px;
}
.service-ico{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(206,17,45,.35);
  color: var(--gamma-red);
  font-weight: 900;
  margin-bottom: 10px;
}
.service-card h3{ font-size: 16px; margin-bottom: 6px; }
.service-card p{ font-size: 13px; color:#444; }

/* PROYECTOS */
.projects{
  padding: 18px 0 26px;
  border-top: 1px solid var(--line);
}
.project-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.project-item{
  border:1px solid var(--line);
  background:#fff;
  padding: 0;
  cursor:pointer;
  overflow:hidden;
}
.project-item img{
  width:100%;
  height: 170px;
  object-fit: cover;
  display:block;
  transition: transform .2s ease;
}
.project-item:hover img{ transform: scale(1.04); }

/* BANDA ASESORAMIENTO + FOTO */
.gamma-band{
  width:100%;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.gamma-band-inner{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  min-height: 260px;
}
.gamma-left{
  padding: 24px 26px;
  border-left: 4px solid rgba(206,17,45,.75);
  background:#fff;
}
.gamma-logo{
  width: 180px; /* más pequeño */
  height:auto;
  display:block;
  margin: 0 0 12px;
  opacity:.95;
}
.gamma-kicker{
  margin:0 0 8px;
  color: rgba(206,17,45,.9);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.gamma-left h2{
  margin:0 0 10px;
  font-size: 26px;
  letter-spacing:-0.02em;
  line-height:1.1;
}
.gamma-text{
  margin:0 0 14px;
  color:#444;
  font-size:14px;
  max-width: 72ch;
}
.gamma-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.gamma-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:11px;
  color:#222;
  opacity:.92;
}
.gamma-trust .dot{
  width:5px;height:5px;
  background: rgba(206,17,45,.9);
  display:inline-block;
}

/* lado derecho: foto (proyectos) */
.gamma-photo{
  position:relative;
  overflow:hidden;
  background:#fff;
  border-left:1px solid var(--line);
}
.gamma-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}

/* FOOTER */
.footer{
  background:#111;
  color:#fff;
  padding: 34px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  font-size: 14px;
  opacity: .95;
}

/* LIGHTBOX */
.lightbox{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.72);
  display:grid;
  place-items:center;
  padding: 20px;
  z-index: 999;
}
.lightbox-img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.lightbox-close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .brand-logo{ height: 26px; }
  .hero-overlay{ left: 18px; right: 18px; top: 18px; max-width: 520px; }
  .product-grid{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: repeat(2, 1fr); }
  .project-grid{ grid-template-columns: repeat(2, 1fr); }
  .gamma-band-inner{ grid-template-columns: 1fr; }
  .gamma-photo{ min-height: 180px; }
}
@media (max-width: 720px){
  .nav{ display:none; }
  .hero-escaparate{ height: 64vh; }
}


/* ===== HEADER: logo izquierda, menú centrado, acciones derecha ===== */
.header-inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 16px;
}

.nav{
  justify-self:center;
}

.header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Búsqueda (sin JS) */
.search{
  position:relative;
}
.search summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
}
.search summary::-webkit-details-marker{display:none;}
.search summary:hover{
  border-color: var(--line, #e7e7e7);
}
.search-icon{
  width:18px; height:18px;
  color: var(--gamma-red, #CE112D);
}
.search-panel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 260px;
  background:#fff;
  border:1px solid var(--line, #e7e7e7);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 10px;
  z-index: 50;
}
.search-panel input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line, #e7e7e7);
  border-radius: 10px;
  outline:none;
}
.search-panel input:focus{
  border-color: rgba(206,17,45,.55);
  box-shadow: 0 0 0 3px rgba(206,17,45,.10);
}

/* Botón “Pedir cita” (sutil) */
.btn-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(206,17,45,.55);
  color: #111;
  text-decoration:none;
  font-weight:700;
  font-size: 13px;
  background: #fff;
}
.btn-cta:hover{
  background: rgba(206,17,45,.06);
}

/* ===== Banda “Somos expertos en” (banner fino) ===== */
.expertise-band{
  border-top: 1px solid var(--line, #e7e7e7);
  border-bottom: 1px solid var(--line, #e7e7e7);
  background:#fff;
  padding: 28px 0;
  text-align:center;
}
.expertise-band .band-title{
  display:inline-block;
  font-weight:900;
  color: var(--gamma-red, #CE112D);
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.expertise-band .band-list{
  color:#111;
  font-size: 18px;
}
.expertise-band .slash{
  color: var(--gamma-red, #CE112D);
  font-weight: 900;
  padding: 0 10px;
}

/* ===== Proyectos realizados ===== */
.projects-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.project-card{
  border:1px solid var(--line, #e7e7e7);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  position:relative;
}
.project-card img{
  width:100%;
  height: 140px;
  object-fit: cover;
  display:block;
  filter: saturate(1.03) contrast(1.02);
}
.project-card span{
  position:absolute;
  left:10px;
  bottom:10px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}
.project-card:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  transform: translateY(-1px);
  transition: .18s ease;
}
@media (max-width: 980px){
  .projects-grid{grid-template-columns: repeat(2, 1fr);}
  .project-card img{height: 170px;}
}
@media (max-width: 520px){
  .projects-grid{grid-template-columns: 1fr;}
  .project-card img{height: 200px;}
}

/* Modal proyectos */
.modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 80;
}
.modal.open{display:flex;}
.modal-content{
  max-width: 1100px;
  width:100%;
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
}
.modal-content img{
  width:100%;
  height:auto;
  display:block;
}
.modal-close{
  position:fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  color:#fff;
  font-size: 20px;
  cursor:pointer;
}

/* Compatibilidad: si los proyectos están como botones .project-thumb */
.projects-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.project-thumb{
  appearance:none;
  border:1px solid var(--line, #e7e7e7);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  padding:0;
  text-align:left;
  cursor:pointer;
  position:relative;
}
.project-thumb img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}
.project-thumb span{
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
}
.project-thumb:hover{box-shadow:0 12px 28px rgba(0,0,0,.10); transform:translateY(-1px); transition:.18s ease;}
@media(max-width:980px){.projects-grid{grid-template-columns:repeat(2,1fr);} .project-thumb img{height:170px;}}
@media(max-width:520px){.projects-grid{grid-template-columns:1fr;} .project-thumb img{height:200px;}}


/* ===== Proyectos (portfolio limpio) ===== */
.projects{
  padding: 48px 0 10px;
  background:#fff;
}

.projects-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items:start;
}

.projects-left .kicker{
  margin:0 0 10px;
  color: rgba(206,17,45,.92);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}

.projects-left h2{
  margin:0 0 12px;
  font-size: 34px;
  letter-spacing:-0.02em;
  line-height:1.1;
}

.projects-left p{
  margin:0 0 18px;
  color:#444;
  max-width: 60ch;
  font-size:15px;
}

.projects-right{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.p-card{
  position:relative;
  display:block;
  border:1px solid var(--line);
  overflow:hidden;
  background:#f7f7f7;
  aspect-ratio: 4 / 3;        /* <- clave para que NO se queden blancos */
}

.p-card img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.001);
  transition: transform .22s ease, filter .22s ease;
}

.p-tag{
  position:absolute;
  left:10px;
  bottom:10px;
  background: rgba(17,17,17,.78);
  color:#fff;
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.p-card:hover img{
  transform: scale(1.04);
  filter: saturate(1.06) contrast(1.05);
}

@media (max-width: 1100px){
  .projects-grid{ grid-template-columns:1fr; }
  .projects-right{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .projects-right{ grid-template-columns: 1fr; }
}

/* ===== Servicios ===== */
.services{
  padding: 52px 0;
  background:#fff;
  border-top: 1px solid var(--line, #e7e7e7);
}

.services-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.services h2{
  margin:0;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.services-sub{
  margin:0;
  color:#666;
  font-size: 13px;
  text-align:right;
  max-width: 520px;
}

.services-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.service-card{
  border: 1px solid var(--line, #e7e7e7);
  background:#fff;
  padding: 16px 16px 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 150px;
}

.service-ico{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(206,17,45,.08);
  color: var(--gamma-red, #CE112D);
  margin-bottom: 10px;
  font-size: 16px;
}

.service-card h3{
  margin:0 0 6px;
  font-size: 14px;
  line-height: 1.2;
}

.service-card p{
  margin:0;
  color:#555;
  font-size: 13px;
  line-height: 1.35;
}

.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border-color: rgba(206,17,45,.25);
}

/* Responsive */
@media (max-width: 1100px){
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
  .services-sub{ text-align:left; }
}
@media (max-width: 700px){
  .services-head{ flex-direction: column; align-items:flex-start; }
  .services-grid{ grid-template-columns: 1fr; }
  .service-card{ min-height: unset; }
}
/* ===== Servicios (serio / formal) ===== */
.services{
  padding: 52px 0;
  background:#fff;
  border-top: 1px solid var(--line, #e7e7e7);
}

.services-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.services h2{
  margin:0;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.services-sub{
  margin:0;
  color:#666;
  font-size: 13px;
  text-align:right;
  max-width: 560px;
}

/* 6 perfecto: 3x2 en desktop */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.service-card{
  border: 1px solid var(--line, #e7e7e7);
  background:#fff;
  padding: 18px 18px 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 150px;
}

.service-ico{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(206,17,45,.06);
  color: var(--gamma-red, #CE112D);
  margin-bottom: 10px;
  border: 1px solid rgba(206,17,45,.14);
}

.service-ico .ico{
  width: 18px;
  height: 18px;
}

.service-card h3{
  margin:0 0 6px;
  font-size: 14px;
  line-height: 1.2;
}

.service-card p{
  margin:0;
  color:#555;
  font-size: 13px;
  line-height: 1.35;
}

.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border-color: rgba(206,17,45,.25);
}

/* Responsive */
@media (max-width: 1100px){
  .services-sub{ text-align:left; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .services-head{ flex-direction: column; align-items:flex-start; }
  .services-grid{ grid-template-columns: 1fr; }
  .service-card{ min-height: unset; }
}


/* ===== Banner: Somos expertos en (rojo GAMMA) ===== */
.expert-banner{
  background: var(--gamma-red, #CE112D);
  color:#fff;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(0,0,0,.08);

}

.expert-inner{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.expert-kicker{
  margin:0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  opacity: .95;
  white-space: nowrap;
}

.expert-list{
  margin:0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: right;
}

.expert-sep{
  display:inline-block;
  margin: 0 10px;
  font-weight: 900;
  color: rgba(255,255,255,.85); /* separador claro, elegante */
}

/* Responsive */
@media (max-width: 900px){
  .expert-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .expert-list{
    text-align: left;
    font-size: 18px;
  }
  .expert-sep{ margin: 0 8px; }
}

/* ===== Banner CTA rojo (GAMMA style) ===== */
.cta-banner{
  background: var(--gamma-red, #CE112D);
  color:#fff;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding: 26px 0;
}

.cta-banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.cta-banner-text h2{
  margin:0 0 6px;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cta-banner-text .cta-text{
  margin:0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
  max-width: 78ch;
}

/* Botón serio (recto) */
.btn-banner{
  display:inline-block;
  background: transparent;
  color:#fff;
  text-decoration:none;
  font-weight: 800;
  border: 2px solid rgba(255,255,255,.85);
  padding: 12px 18px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn-banner:hover{
  background:#fff;
  color:#111;
  border-color:#fff;
}

/* Responsive */
@media (max-width: 900px){
  .cta-banner-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-banner{
    width: 100%;
    text-align: center;
  }
}
/* ===== Integración de secciones (ritmo continuo) ===== */
.section{
  padding: 52px 0;
}

.section-tight{
  padding: 38px 0;
}

/* ===== Banner rojo integrado (CTA y Expert) ===== */
.band-red{
  position: relative;
  background: linear-gradient(90deg, var(--gamma-red, #CE112D), #b50f28);
  color:#fff;
  padding: 28px 0;
  /* Nada de cajas: solo líneas finas */
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* “Fade” arriba/abajo para que no corte */
.band-red::before,
.band-red::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:18px;
  pointer-events:none;
}
.band-red::before{
  top:-18px;
  background: linear-gradient(to bottom, rgba(206,17,45,0), rgba(206,17,45,.18));
}
.band-red::after{
  bottom:-18px;
  background: linear-gradient(to top, rgba(206,17,45,0), rgba(206,17,45,.18));
}

/* Textura MUY sutil (no se nota “ruido”, solo calidad) */
.band-red .band-inner{
  position:relative;
}
.band-red .band-inner::after{
  content:"";
  position:absolute;
  inset:-18px -20px;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,0) 55%);
  opacity:.35;
  pointer-events:none;
}

/* Layout común para bandas */
.band-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
@media (max-width: 900px){
  .band-row{ flex-direction: column; align-items:flex-start; }
}
/* ===== Integración de secciones (ritmo continuo) ===== */
.section{
  padding: 52px 0;
}

.section-tight{
  padding: 38px 0;
}

/* ===== Banner rojo integrado (CTA y Expert) ===== */
.band-red{
  position: relative;
  background: linear-gradient(90deg, var(--gamma-red, #CE112D), #b50f28);
  color:#fff;
  padding: 28px 0;
  /* Nada de cajas: solo líneas finas */
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* “Fade” arriba/abajo para que no corte */
.band-red::before,
.band-red::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:18px;
  pointer-events:none;
}
.band-red::before{
  top:-18px;
  background: linear-gradient(to bottom, rgba(206,17,45,0), rgba(206,17,45,.18));
}
.band-red::after{
  bottom:-18px;
  background: linear-gradient(to top, rgba(206,17,45,0), rgba(206,17,45,.18));
}

/* Textura MUY sutil (no se nota “ruido”, solo calidad) */
.band-red .band-inner{
  position:relative;
}
.band-red .band-inner::after{
  content:"";
  position:absolute;
  inset:-18px -20px;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,0) 55%);
  opacity:.35;
  pointer-events:none;
}

/* Layout común para bandas */
.band-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
@media (max-width: 900px){
  .band-row{ flex-direction: column; align-items:flex-start; }
}
/* ===== Integración de secciones (ritmo continuo) ===== */
.section{
  padding: 52px 0;
}

.section-tight{
  padding: 38px 0;
}

/* ===== Banner rojo integrado (CTA y Expert) ===== */
.band-red{
  position: relative;
  background: linear-gradient(90deg, var(--gamma-red, #CE112D), #b50f28);
  color:#fff;
  padding: 28px 0;
  /* Nada de cajas: solo líneas finas */
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* “Fade” arriba/abajo para que no corte */
.band-red::before,
.band-red::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:18px;
  pointer-events:none;
}
.band-red::before{
  top:-18px;
  background: linear-gradient(to bottom, rgba(206,17,45,0), rgba(206,17,45,.18));
}
.band-red::after{
  bottom:-18px;
  background: linear-gradient(to top, rgba(206,17,45,0), rgba(206,17,45,.18));
}

/* Textura MUY sutil (no se nota “ruido”, solo calidad) */
.band-red .band-inner{
  position:relative;
}
.band-red .band-inner::after{
  content:"";
  position:absolute;
  inset:-18px -20px;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,0) 55%);
  opacity:.35;
  pointer-events:none;
}

/* Layout común para bandas */
.band-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
@media (max-width: 900px){
  .band-row{ flex-direction: column; align-items:flex-start; }
}
/* ===== Integración de secciones (ritmo continuo) ===== */
.section{
  padding: 52px 0;
}

.section-tight{
  padding: 38px 0;
}

/* ===== Banner rojo integrado (CTA y Expert) ===== */
.band-red{
  position: relative;
  background: linear-gradient(90deg, var(--gamma-red, #CE112D), #b50f28);
  color:#fff;
  padding: 28px 0;
  /* Nada de cajas: solo líneas finas */
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* “Fade” arriba/abajo para que no corte */
.band-red::before,
.band-red::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:18px;
  pointer-events:none;
}
.band-red::before{
  top:-18px;
  background: linear-gradient(to bottom, rgba(206,17,45,0), rgba(206,17,45,.18));
}
.band-red::after{
  bottom:-18px;
  background: linear-gradient(to top, rgba(206,17,45,0), rgba(206,17,45,.18));
}

/* Textura MUY sutil (no se nota “ruido”, solo calidad) */
.band-red .band-inner{
  position:relative;
}
.band-red .band-inner::after{
  content:"";
  position:absolute;
  inset:-18px -20px;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,0) 55%);
  opacity:.35;
  pointer-events:none;
}

/* Layout común para bandas */
.band-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
@media (max-width: 900px){
  .band-row{ flex-direction: column; align-items:flex-start; }
}
/* proyectos: que nunca salgan “blancos” */
.project-item{
  border:1px solid var(--line);
  background:#fff;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  aspect-ratio: 4 / 3;
}
.project-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* lightbox hidden compatible */
.lightbox[hidden]{ display:none; }



/* ===============================
   AJUSTES SOLICITADOS (no destructivo)
   - Banners rojos: sin difuminado, no a ancho completo
   - Mejoras header/menú/buscador/cita
   - Nuevas secciones: VIP, Catálogos, Quiénes somos, FAQs, Contacto, Opiniones
   =============================== */

/* 1) Logo más grande */
.brand-logo{ height: 42px; }

/* 2) Menú: jerarquía y legibilidad */
.nav a{ font-size: 15px; font-weight: 700; }
.nav a.active{ font-weight: 800; }

/* 3) Buscador + CTA: estilo coherente */
.search summary{
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background:#fff;
}
.search summary:hover{ border-color: rgba(206,17,45,.35); }
.search-panel{ border-radius: 16px; width: 320px; }
.search-hint{ font-size: 12px; color: var(--muted); margin: 6px 0 8px; }
.search-results{ list-style:none; display:grid; gap: 8px; margin: 0; padding: 0; }
.search-results a{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  text-decoration:none;
  color:#111;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 10px 10px;
}
.search-results a:hover{ border-color: rgba(206,17,45,.28); background: rgba(206,17,45,.04); }
.search-results small{ color: var(--muted); font-weight: 600; }
.search-footer{ margin-top: 10px; display:flex; justify-content:flex-end; }
.search-link{ font-weight: 800; color: var(--gamma-red); text-decoration:none; }

/* Botón cita (header) */
.btn-cta{
  border-radius: 999px;
  padding: 10px 16px;
  border: 2px solid rgba(206,17,45,.55);
  color: #111;
}
.btn-cta:hover{ background: rgba(206,17,45,.06); }

/* 5) VIP (oculta por defecto con [hidden]) */
.vip{ padding: 16px 0 0; }
.vip[hidden]{ display:none; }
.vip-card{
  border: 1px solid rgba(206,17,45,.18);
  border-left: 6px solid var(--gamma-red);
  border-radius: 16px;
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.vip-kicker{
  margin:0 0 6px;
  color: rgba(206,17,45,.92);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.vip-title{ margin:0 0 6px; font-size: 20px; }
.vip-text{ margin:0; color:#444; font-size: 14px; max-width: 62ch; }
.vip-actions{ display:flex; gap: 10px; flex-wrap:wrap; }
@media (max-width: 900px){
  .vip-card{ flex-direction: column; align-items:flex-start; }
}

/* 6) Hero overlay: menos “blanco” sin ensuciar */
.hero-overlay{
  border-radius: 14px;
  overflow:hidden;
}
.hero-overlay::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width: 6px; height: 100%;
  background: var(--gamma-red);
}
.hero-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(206,17,45,.10), transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(17,17,17,.06), transparent 44%),
    linear-gradient(0deg, rgba(255,255,255,.0), rgba(255,255,255,.0));
  pointer-events:none;
}
.hero-overlay > *{ position:relative; }

/* 7/10/14) Títulos en rojo */
.title-red{ color: var(--gamma-red); }

/* 8/11) Subtítulos debajo del título (stack) */
.section-head.stack{ flex-direction: column; align-items:flex-start; }
.section-head.stack .section-sub{ margin: 4px 0 0; }

/* 9) Bandas rojas: SIN difuminados, NO a ancho completo */
.band-red{
  background: transparent;
  padding: 22px 0;
}
.band-red::before,
.band-red::after{ display:none !important; content:none !important; }
.band-red .band-inner{
  background: var(--gamma-red);
  border-radius: 18px;
  padding: 22px 22px;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.band-red .band-inner::after{ display:none !important; content:none !important; }

/* 12/13) Servicios: iconos más vistosos, fondo blanco */
.service-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(206,17,45,.22);
}
.service-card{
  border-radius: 14px;
  background: #fff;
}
.services{
  background: linear-gradient(180deg, #fff, #fcfcfc);
}
.services-grid{ gap: 16px; }

/* 15) “Somos expertos en” (si existe) como banda-card */
.expert-banner{
  background: transparent;
  padding: 20px 0 0;
  border: 0;
}
.expert-banner .container{
  background: #111;
  border-radius: 18px;
  padding: 18px 22px;
}
.expert-banner .expert-kicker{ color: rgba(255,255,255,.82); }
.expert-banner .expert-list{ color:#fff; }

/* 17) Descargas */
.download-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.download-card{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  border:1px solid var(--line);
  border-radius: 16px;
  text-decoration:none;
  color:#111;
  background:#fff;
  overflow:hidden;
}
.download-thumb{
  background:#f5f5f5;
  height: 100%;
}
.download-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.download-body{ padding: 12px 12px; }
.download-body h3{ margin:0 0 4px; font-size: 15px; }
.download-body p{ margin:0 0 8px; color:#555; font-size: 13px; }
.download-meta{ color: var(--muted); font-size: 12px; font-weight: 700; }
.download-card:hover{ box-shadow: 0 12px 26px rgba(0,0,0,.08); transform: translateY(-1px); transition:.18s ease; }
@media (max-width: 980px){
  .download-grid{ grid-template-columns: 1fr; }
  .download-card{ grid-template-columns: 110px 1fr; }
}

/* 22) Quiénes somos */
.about-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: stretch;
}
.about .kicker{
  margin:0 0 10px;
  color: rgba(206,17,45,.92);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.about h2{ margin:0 0 10px; font-size: 30px; letter-spacing:-0.02em; }
.about p{ margin:0 0 14px; color:#444; max-width: 62ch; }
.about-list{ margin: 0 0 16px 18px; color:#333; }
.about-media{
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 15%, rgba(206,17,45,.12), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(17,17,17,.08), transparent 44%),
    linear-gradient(135deg, #fff, #f7f7f7);
  position:relative;
  overflow:hidden;
}
.about-shape{
  position:absolute;
  right:-40px; top:-40px;
  width: 160px; height: 160px;
  border-radius: 26px;
  border: 1px solid rgba(206,17,45,.18);
  background: rgba(206,17,45,.06);
  transform: rotate(8deg);
}
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-media{ min-height: 220px; }
}

/* 21) FAQs */
.faq-grid{ display:grid; gap: 10px; }
.faq-item{
  border:1px solid var(--line);
  border-radius: 14px;
  background:#fff;
  padding: 12px 14px;
}
.faq-item summary{
  cursor:pointer;
  font-weight: 800;
}
.faq-item p{ margin: 10px 0 0; color:#444; }

/* 23) Formularios (presupuesto/opinión) */
.form{
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background:#fff;
}
.form label{ display:grid; gap:6px; font-weight: 800; font-size: 13px; color:#222; }
.form input, .form select, .form textarea{
  font: inherit;
  padding: 10px 12px;
  border:1px solid var(--line);
  border-radius: 12px;
  outline:none;
}
.form input:focus, .form select:focus, .form textarea:focus{
  border-color: rgba(206,17,45,.55);
  box-shadow: 0 0 0 3px rgba(206,17,45,.10);
}
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.form-actions{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; margin-top: 10px; }
.form-legal{ margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.form-legal a{ color: var(--gamma-red); text-decoration:none; font-weight: 800; }
@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* 19) Contacto */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.contact-cards{ display:grid; gap: 12px; margin-top: 10px; }
.contact-card{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background:#fff;
}
.contact-card h3{ margin:0 0 6px; font-size: 14px; }
.contact-card p{ margin:0; color:#444; font-size: 13px; }
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Footer: enlaces */
.footer a{ color:#fff; text-decoration:none; font-weight: 800; }
.footer a:hover{ text-decoration: underline; }
.footer .sep{ opacity:.6; padding: 0 8px; }


/* ===== PROYECTOS (sin imágenes - estilo Gamma) ===== */
.projects-soon {
  background: #fff;
  padding: clamp(28px, 4vw, 52px) 0;
}

.projects-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.projects-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 600;
}

.btn-ghost:hover {
  border-color: rgba(0,0,0,.22);
  transform: translateY(-1px);
}

.soon-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(0,0,0,.10);
  border-left: 6px solid #d6001c; /* rojo gamma-like */
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px;
  margin: 14px 0 18px;
}

.soon-badge {
  background: #d6001c;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .3px;
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.soon-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
  color: #111;
}

.soon-text span {
  color: rgba(0,0,0,.70);
  font-size: 14px;
}

.projects-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.proj-card {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.04);
  transition: transform .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}

.proj-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: #d6001c;
  opacity: .95;
}

.proj-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.18);
}

.proj-card h3 {
  margin: 10px 0 8px;
  font-size: 16px;
  color: #111;
}

.proj-card p {
  margin: 0 0 10px;
  color: rgba(0,0,0,.70);
  font-size: 14px;
  line-height: 1.45;
}

.proj-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.proj-list li {
  font-size: 13px;
  color: rgba(0,0,0,.78);
  padding-left: 18px;
  position: relative;
}

.proj-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #d6001c;
  font-weight: 900;
}

.how-we-work {
  margin-top: 18px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}

.how-title {
  margin: 0 0 10px;
  font-size: 16px;
  color: #111;
}

.how-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.how-steps li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.02);
}

.how-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d6001c;
  color: #fff;
  font-weight: 900;
  flex: 0 0 auto;
}

.how-steps strong {
  display: block;
  color: #111;
  margin-bottom: 2px;
}

.how-steps p {
  margin: 0;
  color: rgba(0,0,0,.72);
  font-size: 14px;
  line-height: 1.45;
}

.how-cta {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-link {
  color: #111;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.25);
}

.btn-link:hover {
  border-bottom-color: #d6001c;
}

/* Responsive */
@media (max-width: 1024px) {
  .projects-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .projects-cards { grid-template-columns: 1fr; }
  .soon-banner { flex-direction: column; }
}


/* ===== Banner después de Proyectos ===== */
.after-projects-banner{
  padding: 16px 0 clamp(26px, 4vw, 44px);
  background: #fff;
}

.apb-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 55%, rgba(214,0,28,.05) 100%);
  box-shadow: 0 14px 26px rgba(0,0,0,.05);
  padding: clamp(16px, 2.2vw, 22px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

.apb-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:100%;
  background:#d6001c;
}

.apb-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .35px;
  color: #d6001c;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.apb-title{
  margin: 0 0 6px;
  font-size: clamp(18px, 2vw, 22px);
  color:#111;
  line-height: 1.15;
}

.apb-sub{
  margin: 0 0 12px;
  color: rgba(0,0,0,.72);
  font-size: 14px;
  line-height: 1.5;
  max-width: 52ch;
}

.apb-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 4px;
}

.apb-right{
  display:grid;
  gap:10px;
  align-content:center;
}

.apb-stat{
  display:flex;
  gap:10px;
  align-items:center;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius: 14px;
  padding: 10px 12px;
}

.apb-num{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#d6001c;
  color:#fff;
  font-weight: 900;
  flex: 0 0 auto;
}

.apb-txt{
  font-weight: 700;
  color:#111;
  font-size: 14px;
}

@media (max-width: 920px){
  .apb-card{
    grid-template-columns: 1fr;
    background: #fff;
  }
  .apb-right{
    grid-template-columns: 1fr;
  }
}
/* ===== Banner doble franja (Gamma-like) ===== */
.gamma-band{
  padding: 14px 0 clamp(26px, 4vw, 44px);
  background:#fff;
}

.gamma-band-inner{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 26px rgba(0,0,0,.05);
}

/* Franja blanca */
.band-white{
  background:#fff;
  padding: clamp(16px, 2.2vw, 22px);
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
  position: relative;
}

.band-white::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:100%;
  background:#d6001c;
}

.bw-left{ padding-left: 10px; }

.bw-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .35px;
  color:#d6001c;
  text-transform: uppercase;
  background: rgba(214,0,28,.06);
  border: 1px solid rgba(214,0,28,.18);
  padding: 7px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.bw-title{
  margin: 0 0 6px;
  font-size: clamp(18px, 2vw, 22px);
  color:#111;
  line-height: 1.15;
}

.bw-sub{
  margin: 0;
  color: rgba(0,0,0,.72);
  font-size: 14px;
  line-height: 1.5;
  max-width: 58ch;
}

.bw-right{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  justify-content: flex-end;
  padding-top: 4px;
}

.bw-pill{
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  color:#111;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
}

/* Franja roja */
.band-red{
  background:#d6001c;
  color:#fff;
  padding: 14px clamp(16px, 2.2vw, 22px);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.br-left{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.br-strong{
  font-weight: 900;
  letter-spacing: .2px;
}

.br-text{
  opacity: .92;
  font-weight: 600;
}

.br-right{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Botones sobre rojo */
.btn-on-red{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.85);
}

.btn-on-red:hover{
  transform: translateY(-1px);
  opacity: .98;
}

.btn-on-red-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  background: transparent;
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.75);
}

.btn-on-red-outline:hover{
  border-color:#fff;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 920px){
  .band-white{
    grid-template-columns: 1fr;
  }
  .bw-right{
    justify-content: flex-start;
  }
  .band-red{
    flex-direction: column;
    align-items: flex-start;
  }
}
/* FIX anchura uniforme */
.container{
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}
@media (max-width: 520px){
  .container{ width: calc(100% - 28px); }
}
section{ width: 100%; }
html, body{ overflow-x: hidden; }

.band-red-mini{
  background:#d6001c;
  color:#fff;
  padding: 14px clamp(16px, 2.2vw, 22px);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
@media (max-width: 920px){
  .band-red-mini{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===============================
   DS BANNERS (estilo unificado)
   =============================== */
.ds-banner{
  padding: 18px 0 clamp(26px, 4vw, 44px);
  background: #fff;
}

/* La tarjeta base (misma para ambos) */
.ds-banner-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 26px rgba(0,0,0,.05);
  display: grid;
  grid-template-columns: 1.45fr .95fr;
  position: relative;
}

/* barra roja lateral “marca” */
.ds-banner-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:6px; height:100%;
  background: var(--gamma-red, #CE112D);
}

/* Columna principal */
.ds-banner-main{
  padding: clamp(16px, 2.2vw, 22px);
  background:#fff;
}

.ds-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .32px;
  color: var(--gamma-red, #CE112D);
  text-transform: uppercase;
  background: rgba(206,17,45,.06);
  border: 1px solid rgba(206,17,45,.18);
  padding: 7px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.ds-title{
  margin: 0 0 6px;
  font-size: clamp(18px, 2vw, 24px);
  color:#111;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.ds-text{
  margin: 0 0 12px;
  color: rgba(0,0,0,.72);
  font-size: 14px;
  line-height: 1.5;
  max-width: 70ch;
}

.ds-actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Botones unificados */
.ds-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.10);
}

.ds-btn--solid{
  background: var(--gamma-red, #CE112D);
  border-color: var(--gamma-red, #CE112D);
  color:#fff;
}

.ds-btn--solid:hover{ transform: translateY(-1px); }

.ds-btn--ghost{
  background:#fff;
  color:#111;
  border-color: rgba(0,0,0,.14);
}

.ds-btn--ghost:hover{
  border-color: rgba(0,0,0,.22);
  transform: translateY(-1px);
}

/* Columna lateral (misma base) */
.ds-banner-side{
  padding: clamp(16px, 2.2vw, 22px);
  background: linear-gradient(90deg, #fff 0%, rgba(206,17,45,.05) 100%);
  border-left: 1px solid rgba(0,0,0,.08);
  display:grid;
  gap:10px;
  align-content:center;
}

.ds-metric{
  display:flex;
  align-items:center;
  gap:10px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius: 14px;
  padding: 10px 12px;
  color:#111;
  font-weight: 800;
  font-size: 13px;
}

.ds-dot{
  width:10px; height:10px;
  border-radius: 999px;
  background: var(--gamma-red, #CE112D);
  box-shadow: 0 0 0 4px rgba(206,17,45,.12);
}

/* Chips del banner asesoramiento */
.ds-chips{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  margin: 8px 0 2px;
}

.ds-chip{
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
  color:#111;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
}

/* Variante: lateral “lite” para el banner B */
.ds-banner-side--lite{
  background: linear-gradient(180deg, rgba(206,17,45,.06), rgba(0,0,0,.02));
}

.ds-mini{
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius: 16px;
  padding: 12px 12px;
}

.ds-mini-k{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .28px;
  text-transform: uppercase;
  color: rgba(0,0,0,.62);
  margin-bottom: 4px;
}

.ds-mini-t{
  font-weight: 900;
  color:#111;
  margin-bottom: 4px;
}

.ds-mini-p{
  margin:0;
  color: rgba(0,0,0,.70);
  font-size: 13px;
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 920px){
  .ds-banner-card{ grid-template-columns: 1fr; }
  .ds-banner-side{ border-left: 0; border-top: 1px solid rgba(0,0,0,.08); }
}
/* ===== PROYECTOS estilo PRODUCTOS (sin imágenes) ===== */
.projects.products-like{
  padding: 22px 0 10px; /* igual que products */
}

/* Bloque “imagen” falso para mantener estética */
.project-card--empty .project-placeholder{
  width:100%;
  height:260px;                /* igual que .product-card img */
  background:
    radial-gradient(circle at 18% 20%, rgba(206,17,45,.12), transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(17,17,17,.06), transparent 44%),
    linear-gradient(135deg, #fff, #f4f4f4);
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.ph-badge{
  position:absolute;
  left:14px;
  top:14px;
  background: rgba(206,17,45,.92);
  color:#fff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  padding: 8px 10px;
  border-radius: 999px;
}

.ph-icon{
  font-size: 28px;
  font-weight: 900;
  color: rgba(17,17,17,.28);
  transform: rotate(-10deg);
}
/* ===== PROYECTOS “más producto” ===== */
.projects.products-like{
  padding: 22px 0 10px; /* igual que products */
}

/* placeholder con “look catálogo” */
.project-card--empty .project-placeholder{
  width:100%;
  height:260px; /* igual que .product-card img */
  border-bottom: 1px solid var(--line);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(206,17,45,.14), transparent 44%),
    radial-gradient(circle at 80% 72%, rgba(17,17,17,.08), transparent 48%),
    linear-gradient(135deg, #ffffff, #f2f2f2);
}

/* etiqueta superior (tipo categoría) */
.project-card--empty .ph-badge{
  position:absolute;
  left:14px;
  top:14px;
  background: var(--gamma-red);
  color:#fff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.25px;
  padding: 8px 10px;
  border-radius: 999px;
}

/* aviso inferior */
.project-card--empty .ph-note{
  position:absolute;
  left:14px;
  bottom:14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  color:#111;
  font-weight:900;
  font-size:12px;
  padding: 7px 10px;
  border-radius: 12px;
}

/* cuerpo de tarjeta (sin tocar tus h3/p por defecto) */
.project-card--empty .pc-body{
  padding: 0 0 0; /* lo gestionamos con h3/p ya existentes */
}

.project-card--empty h3{ margin: 14px 16px 6px; }
.project-card--empty p{ margin: 0 16px 10px; color:#555; font-size: 14px; }

/* chips tipo “atributos producto” */
.pc-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 16px 12px;
}

.pc-chip{
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 900;
  font-size: 12px;
  color:#111;
}

/* link inferior estilo catálogo */
.pc-link{
  display:block;
  margin: 0 16px 16px;
  color:#111;
  text-decoration:none;
  font-weight: 900;
  border-bottom: 1px solid rgba(0,0,0,.22);
  width: fit-content;
}

.pc-link:hover{
  border-bottom-color: var(--gamma-red);
  color: #111;
}
.project-card--empty .project-placeholder::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    linear-gradient(0deg, rgba(0,0,0,.08), rgba(0,0,0,0) 60%);
  opacity:.65;
  transition: transform .25s ease;
}
.product-card:hover .project-placeholder::after{
  transform: scale(1.02);
}
/* ===== Proyectos estilo Productos (con foto real) ===== */
.proj-card{
  display:block; /* por si acaso */
}

.proj-media{
  position:relative;
}

.proj-media img{
  width:100%;
  height:260px;            /* mismo alto que productos */
  object-fit:cover;
  display:block;
  filter: saturate(1.03) contrast(1.02);
}

/* Etiqueta roja arriba */
.proj-badge{
  position:absolute;
  left:14px;
  top:14px;
  background: var(--gamma-red, #CE112D);
  color:#fff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.25px;
  padding: 8px 10px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* Nota inferior (tipo Gamma) */
.proj-note{
  position:absolute;
  left:14px;
  bottom:14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  color:#111;
  font-weight:900;
  font-size:12px;
  padding: 7px 10px;
  border-radius: 12px;
}

/* Cuerpo */
.proj-body h3{
  margin: 14px 16px 6px;
  font-size: 18px;
}
.proj-body p{
  margin: 0 16px 12px;
  color:#555;
  font-size: 14px;
}

/* CTA dentro (limpio, sin subrayado feo) */
.proj-cta{
  display:inline-block;
  margin: 0 16px 16px;
  font-weight: 900;
  color:#111;
  border-bottom: 2px solid rgba(0,0,0,.18);
}

.proj-card:hover .proj-cta{
  border-bottom-color: var(--gamma-red, #CE112D);
}

/* Zoom suave como catálogo */
.proj-card:hover .proj-media img{
  transform: scale(1.02);
  transition: transform .22s ease, filter .22s ease;
}
/* ===== Proyectos preview (bocetos) ===== */
.projects-preview{
  padding: 56px 0;
  background:#fff;
  border-top:1px solid var(--line);
}

.pp-head{
  max-width: 720px;
  margin-bottom: 28px;
}

.pp-title{
  font-size: 32px;
  letter-spacing:-0.02em;
  margin-bottom: 8px;
}

.pp-sub{
  font-size: 15px;
  color:#444;
  line-height:1.5;
  margin-bottom: 6px;
}

.pp-meta{
  font-size: 12px;
  font-weight:700;
  color: var(--gamma-red);
  letter-spacing:.04em;
}

.pp-visual{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.pp-card{
  border:1px solid var(--line);
  border-radius: 18px;
  background:#fff;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.pp-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.pp-card img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}

.pp-tag{
  position:absolute;
  margin: 14px;
  background: var(--gamma-red);
  color:#fff;
  font-weight:800;
  font-size:12px;
  padding: 8px 12px;
  border-radius: 999px;
}

.pp-card h3{
  margin: 14px 16px 6px;
  font-size: 18px;
}

.pp-card p{
  margin: 0 16px 18px;
  font-size: 14px;
  color:#555;
}

.pp-cta{
  margin-top: 34px;
}

/* Responsive */
@media (max-width: 980px){
  .pp-visual{
    grid-template-columns: 1fr;
  }
}
/* PROYECTOS con look de PRODUCTOS */
.projects-like-products{ padding: 22px 0 26px; border-top: 1px solid var(--line); }

.project-grid--products{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  padding-bottom: 6px;
}

.project-card{
  width:100%;
  text-align:left;
  cursor:pointer;
  padding:0;
}

/* Reutiliza el look de product-card */
.project-card img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
}

/* “link” sutil como llamada a la acción */
.pc-link{
  display:inline-block;
  margin: 2px 16px 16px;
  font-weight: 800;
  border-bottom: 2px solid rgba(0,0,0,.2);
}

.product-card:hover .pc-link{
  border-bottom-color: var(--gamma-red);
}

@media (max-width: 980px){
  .project-grid--products{ grid-template-columns: 1fr; }
  .project-card img{ height: 280px; }
}
/* PROYECTOS: mismo grid que PRODUCTOS, sutilmente distinto (bocetos SVG) */
.project-grid--products{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.project-card{
  width:100%;
  padding:0;
  text-align:left;
  cursor:pointer;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.project-card:hover{
  transform: translateY(-2px);
  border-color: rgba(214,0,28,.25);
  box-shadow: 0 14px 42px rgba(0,0,0,.08);
}

.project-img{
  background: #f7f7f7;
  border-bottom: 1px solid rgba(0,0,0,.06);
  height: 260px; /* como productos */
  display:flex;
  align-items:center;
  justify-content:center;
}

.project-img svg{
  width:100%;
  height:100%;
  display:block;
}

.pc-link{
  display:inline-block;
  margin: 2px 16px 16px;
  font-weight: 800;
  border-bottom: 2px solid rgba(0,0,0,.2);
}

.project-card:hover .pc-link{
  border-bottom-color: var(--gamma-red, #d6001c);
}

@media (max-width: 980px){
  .project-grid--products{ grid-template-columns: 1fr; }
  .project-img{ height: 280px; }
}
/* PROYECTOS: discreto (menos “wow” que Productos) */
.projects-intro{
  background: rgba(214,0,28,.04);
  border: 1px solid rgba(214,0,28,.10);
  border-radius: 14px;
  padding: 12px 14px;
  max-width: 92ch;
}

.projects-lead{
  margin: 0;
  color: #222;
  font-size: 15px;
  line-height: 1.55;
}

.projects-muted{
  color: rgba(0,0,0,.62);
}

.project-grid--products{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* Mucho más suave que Productos */
.project-card{
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: none; /* clave: no compite con Productos */
  transition: border-color .15s ease, transform .15s ease;
}

.project-card:hover{
  transform: translateY(-1px); /* sutil */
  border-color: rgba(214,0,28,.22);
}

.project-img{
  background: #f7f7f7;
  border-bottom: 1px solid rgba(0,0,0,.06);
  height: 260px; /* igual que Productos */
  display:flex;
  align-items:center;
  justify-content:center;
}

.project-img svg{
  width: 100%;
  height: 100%;
  display: block;
}

.pc-link{
  display:inline-block;
  margin: 2px 16px 16px;
  font-weight: 800;
  border-bottom: 2px solid rgba(0,0,0,.18);
}

.project-card:hover .pc-link{
  border-bottom-color: var(--gamma-red, #d6001c);
}

@media (max-width: 980px){
  .project-grid--products{ grid-template-columns: 1fr; }
  .project-img{ height: 280px; }
}
/* ====== BANNERS GAMMA-LIKE (2 banners mismo estilo) ====== */
.gg-band{
  background: var(--gamma-red, #d6001c);
  padding: 22px 0;
  margin: 0; /* para que no “salte” */
}

.gg-band-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
}

.gg-band-title{
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(22px, 2.1vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-weight: 900;
}

.gg-band-text{
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  line-height: 1.45;
  max-width: 86ch;
}

.gg-band-right{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.gg-band-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Botón principal (marco blanco tipo tu imagen, pero mejor) */
.gg-band-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -0.01em;
  border-radius: 14px;
  padding: 14px 18px;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

/* Outline fuerte (el de tu imagen) */
.gg-band-btn--outline{
  color: #fff;
  border: 2px solid rgba(255,255,255,.9);
  background: transparent;
}

.gg-band-btn--outline:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: #fff;
}

/* Ghost (más discreto, para segundo botón) */
.gg-band-btn--ghost{
  color: rgba(255,255,255,.96);
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}

.gg-band-btn--ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.55);
}

/* Chips / puntos decorativos */
.gg-band-chips{
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.gg-chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.95);
  font-weight: 800;
  font-size: 12px;
}

.gg-band-points{
  display: flex;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.gg-band-points span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 12px;
  border-radius: 999px;
}

.gg-band-points i{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}

/* Responsive */
@media (max-width: 900px){
  .gg-band-card{
    flex-direction: column;
    align-items: stretch;
  }
  .gg-band-right, .gg-band-actions{
    justify-content: flex-start;
  }
  .gg-band-btn{
    width: fit-content;
  }
}
/* PROYECTOS · CONCEPTO */
.projects-concept{
  padding: 40px 0;
}

.projects-sub{
  max-width: 78ch;
}

.projects-concept-card{
  margin-top: 24px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 18px;
}

.projects-concept-svg{
  width: 100%;
  height: auto;
  display: block;
}

.projects-concept-text{
  margin: 14px 0 4px;
  color: rgba(0,0,0,.7);
  font-size: 14px;
  max-width: 80ch;
}
/* PROYECTOS (ENVÍO - PRÓXIMAMENTE) */
.projects-send{
  padding: 40px 0;
}

.projects-send-sub{
  max-width: 80ch;
}

.projects-send-card{
  margin-top: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.psc-left{
  flex: 1 1 auto;
  min-width: 260px;
}

.psc-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  color: #d6001c;
  background: rgba(214,0,28,.08);
  border: 1px solid rgba(214,0,28,.18);
  padding: 7px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.psc-title{
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.psc-text{
  margin: 0;
  color: rgba(0,0,0,.72);
  font-size: 14px;
  line-height: 1.45;
  max-width: 78ch;
}

.psc-list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: rgba(0,0,0,.70);
  font-size: 13px;
  font-weight: 700;
}

.psc-right{
  flex: 0 0 auto;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 220px;
  justify-items: end;
}

.psc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
  border-radius: 14px;
  padding: 12px 16px;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.psc-btn--solid{
  background: #d6001c;
  color: #fff;
  border: 2px solid #d6001c;
}

.psc-btn--solid:hover{
  transform: translateY(-1px);
  background: #b80018;
  border-color: #b80018;
}

.psc-btn--outline{
  background: transparent;
  color: #111;
  border: 2px solid rgba(0,0,0,.18);
}

.psc-btn--outline:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.28);
}

.psc-note{
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  text-align: right;
  max-width: 28ch;
}

@media (max-width: 900px){
  .projects-send-card{
    flex-direction: column;
  }
  .psc-right{
    justify-items: start;
    min-width: auto;
  }
  .psc-note{
    text-align: left;
  }
}
/* ====== BANNERS ROJOS (estrechos + borde gris Gamma) ====== */
.gg-band{
  background: var(--gamma-red, #d6001c);
  padding: 14px 0;           /* <-- más estrecho */
  margin: 0;
}

.gg-band-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(0,0,0,.18); /* <-- gris Gamma (borde) */
  border-radius: 18px;
  padding: 16px 18px;        /* <-- más estrecho */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: none;          /* <-- más sobrio */
}

/* Tipos un pelín más compactos */
.gg-band-title{
  margin: 0 0 4px;
  color: #fff;
  font-size: clamp(18px, 1.6vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-weight: 900;
}

.gg-band-text{
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 13.5px;
  line-height: 1.35;
  max-width: 86ch;
}

/* Botones más contenidos */
.gg-band-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
  border-radius: 12px;
  padding: 11px 14px;       /* <-- más estrecho */
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.gg-band-btn--outline{
  color: #fff;
  border: 2px solid rgba(255,255,255,.92);
  background: transparent;
}

.gg-band-btn--outline:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: #fff;
}

.gg-band-btn--ghost{
  color: rgba(255,255,255,.96);
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}

.gg-band-btn--ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.55);
}

/* Chips/puntos más discretos */
.gg-band-chips, .gg-band-points{
  margin-top: 8px;
  gap: 10px;
}

.gg-chip,
.gg-band-points span{
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}

.gg-band-points i{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

/* Responsive */
@media (max-width: 900px){
  .gg-band-card{
    flex-direction: column;
    align-items: stretch;
  }
  .gg-band-right, .gg-band-actions{
    justify-content: flex-start;
  }
}
.projects-elegant{ padding: 36px 0; }
.projects-elegant-sub{ max-width: 82ch; }

.projects-grid .project-card{ overflow: hidden; }

/* Hero abstracto (sin imágenes) */
.pc-hero{
  height: 170px;
  background: linear-gradient(135deg, #f7f7f7 0%, #ffffff 60%, #f3f3f3 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: relative;
  display: grid;
  place-content: center;
  text-align: center;
}

.pc-hero-title{
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 18px;
  color: #111;
}

.pc-hero-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  font-weight: 700;
}

/* Elementos geométricos finos */
.pc-hero::before,
.pc-hero::after{
  content:"";
  position:absolute;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18); /* gris Gamma */
  background: transparent;
}

.pc-hero::before{
  width: 120px; height: 80px;
  left: 18px; top: 18px;
}

.pc-hero::after{
  width: 170px; height: 56px;
  right: 18px; bottom: 18px;
  border-color: rgba(214,0,28,.55); /* acento rojo sutil */
}

/* Variantes por categoría: SOLO un toque, no chillón */
.pc-hero--banos::after{ border-color: rgba(214,0,28,.55); }
.pc-hero--cocinas::after{ border-color: rgba(214,0,28,.45); }
.pc-hero--suelos::after{ border-color: rgba(214,0,28,.40); }
.pc-hero--ceramica::after{ border-color: rgba(214,0,28,.35); }
.pc-hero--reforma::after{ border-color: rgba(214,0,28,.50); }
.pc-hero--obra::after{ border-color: rgba(214,0,28,.42); }

/* “link” tipo Gamma */
.project-card .pc-link{
  display:inline-block;
  margin-top: 10px;
  font-weight: 900;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
/* ===============================
   SERVICIOS (Gamma fino · NO compite con Productos)
   Pega esto al FINAL del CSS
   =============================== */

.services{
  padding: 46px 0 10px;
  background:#fff;
  border-top: 1px solid var(--line, #e7e7e7);
}

.services-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.services-sub{
  margin:0;
  color:#666;
  font-size: 13px;
  text-align:right;
  max-width: 560px;
}

/* 6 cards -> 3x2 (perfecto) */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* más sobrio que productos: casi sin sombra */
.service-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background:#fff;
  padding: 18px 18px 16px;
  box-shadow: none;
  transition: transform .14s ease, border-color .14s ease;
}

.service-card:hover{
  transform: translateY(-1px);
  border-color: rgba(206,17,45,.18);
}

.service-ico{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fff;
  border: 1px solid rgba(206,17,45,.22);
  color: var(--gamma-red, #CE112D);
  margin-bottom: 10px;
}

.service-ico .ico{ width: 18px; height: 18px; }

.service-card h3{
  margin:0 0 6px;
  font-size: 14px;
  line-height: 1.2;
}

.service-card p{
  margin:0;
  color:#555;
  font-size: 13px;
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 1100px){
  .services-sub{ text-align:left; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .services-head{ flex-direction: column; align-items:flex-start; }
  .services-grid{ grid-template-columns: 1fr; }
}
/* ===============================
   SERVICIOS (Gamma fino · NO compite con Productos)
   Pega esto al FINAL del CSS
   =============================== */

.services{
  padding: 46px 0 10px;
  background:#fff;
  border-top: 1px solid var(--line, #e7e7e7);
}

.services-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.services-sub{
  margin:0;
  color:#666;
  font-size: 13px;
  text-align:right;
  max-width: 560px;
}

/* 6 cards -> 3x2 (perfecto) */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* más sobrio que productos: casi sin sombra */
.service-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background:#fff;
  padding: 18px 18px 16px;
  box-shadow: none;
  transition: transform .14s ease, border-color .14s ease;
}

.service-card:hover{
  transform: translateY(-1px);
  border-color: rgba(206,17,45,.18);
}

.service-ico{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fff;
  border: 1px solid rgba(206,17,45,.22);
  color: var(--gamma-red, #CE112D);
  margin-bottom: 10px;
}

.service-ico .ico{ width: 18px; height: 18px; }

.service-card h3{
  margin:0 0 6px;
  font-size: 14px;
  line-height: 1.2;
}

.service-card p{
  margin:0;
  color:#555;
  font-size: 13px;
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 1100px){
  .services-sub{ text-align:left; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .services-head{ flex-direction: column; align-items:flex-start; }
  .services-grid{ grid-template-columns: 1fr; }
}
/* ===============================
   TOP SECTIONS: estilo Gamma (recto / sobrio)
   - Catálogos
   - Proyectos (próximamente)
   =============================== */

/* Ritmo de cabeceras arriba: menos aire */
.downloads.section,
.projects-send{
  padding-top: 34px;
  padding-bottom: 34px;
}

/* Head: más Gamma -> línea fina debajo del título */
.section-head.stack{
  margin-bottom: 14px;
}

.section-head.stack .title-red{
  position: relative;
  padding-bottom: 8px;
  font-weight: 900;
}

.section-head.stack .title-red::after{
  content:"";
  display:block;
  width: 64px;
  height: 2px;
  background: var(--gamma-red);
  margin-top: 10px;
}

/* =======================
   CATÁLOGOS (más recto)
   ======================= */

.download-grid{
  gap: 14px; /* más “orden” */
}

.download-card{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;          /* <- menos redondo */
  box-shadow: none !important;  /* <- fuera suavidad */
  overflow: hidden;
  background:#fff;
  transition: border-color .15s ease, transform .15s ease;
}

.download-card:hover{
  transform: translateY(-1px);
  border-color: rgba(206,17,45,.25);
}

.download-thumb{
  background: #f4f4f4;
}

/* Si tus portadas se ven “raras”, fuerza encuadre limpio */
.download-thumb img{
  object-fit: cover;
}

/* Tipografía más “catálogo” */
.download-body h3{
  font-weight: 800;
  letter-spacing: -0.01em;
}

.download-body p{
  color: rgba(0,0,0,.68);
}

.download-meta{
  font-weight: 800;
  color: rgba(0,0,0,.55);
}

/* =======================
   PROYECTOS (más recto)
   ======================= */

.projects-send-card{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;      /* <- menos redondo */
  box-shadow: none;         /* <- más serio */
  padding: 18px 18px;
}

/* Barra lateral roja más “Gamma” (recta y fina) */
.projects-send-card{
  position: relative;
}
.projects-send-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width: 4px;
  height: 100%;
  background: var(--gamma-red);
}

/* Badge “PRÓXIMAMENTE” más industrial */
.psc-badge{
  border-radius: 4px;       /* <- nada de pastilla */
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: .10em;
  background: rgba(206,17,45,.08);
  border: 1px solid rgba(206,17,45,.22);
  color: var(--gamma-red);
}

/* Lista: más limpia (sin emojis grandes) */
.psc-list{
  gap: 10px 14px;
}
.psc-list li{
  font-size: 13px;
  color: rgba(0,0,0,.70);
  font-weight: 700;
}

/* Botones: más rectos, más Gamma */
.psc-btn{
  border-radius: 6px;       /* <- recto */
  padding: 11px 14px;
  font-weight: 900;
}

.psc-btn--solid{
  background: var(--gamma-red);
  border-color: var(--gamma-red);
}

.psc-btn--outline{
  border-color: rgba(0,0,0,.22);
}

/* Nota: más discreta */
.psc-note{
  color: rgba(0,0,0,.52);
  font-size: 12px;
}

/* Responsive: que no “bote” */
@media (max-width: 900px){
  .projects-send-card{ padding: 16px; }
}
/* ===============================
   ORDEN + LOOK GAMMA (recto)
   Catálogos + Proyectos (arriba)
   =============================== */

/* Espaciado de secciones superiores */
.downloads.section,
.projects-send{
  padding: 34px 0;
  background:#fff;
}

/* Cabeceras: Gamma -> subrayado rojo corto */
.section-head.stack{
  margin: 0 0 14px;
}
.section-head.stack .title-red{
  position: relative;
  padding-bottom: 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.section-head.stack .title-red::after{
  content:"";
  display:block;
  width: 64px;
  height: 2px;
  background: var(--gamma-red);
  margin-top: 10px;
}
.section-head.stack .section-sub{
  color: rgba(0,0,0,.62);
  font-size: 13px;
  margin-top: 4px;
}

/* =======================
   CATÁLOGOS (recto / serio)
   ======================= */
.download-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.download-card{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;     /* menos redondo */
  background:#fff;
  overflow:hidden;
  box-shadow:none !important;
  text-decoration:none;
  color:#111;
  transition: border-color .15s ease, transform .15s ease;
}

.download-card:hover{
  transform: translateY(-1px);
  border-color: rgba(206,17,45,.25);
}

.download-thumb{
  background:#f4f4f4;
}
.download-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.download-body{
  padding: 12px 12px;
}
.download-body h3{
  margin:0 0 4px;
  font-size: 15px;
  font-weight: 900;
}
.download-body p{
  margin:0 0 8px;
  font-size: 13px;
  color: rgba(0,0,0,.68);
}
.download-meta{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
}

@media (max-width: 980px){
  .download-grid{ grid-template-columns: 1fr; }
  .download-card{ grid-template-columns: 110px 1fr; }
}

/* =======================
   PROYECTOS (próximamente)
   SOBRIO: no compite con Productos
   ======================= */
.projects-send-card{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  background:#fff;
  padding: 18px;
  box-shadow:none;
  position:relative;
}

/* Barra roja lateral (fina y recta) */
.projects-send-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:4px;
  height:100%;
  background: var(--gamma-red);
}

/* Badge más industrial (recto) */
.psc-badge{
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: .10em;
  background: rgba(206,17,45,.08);
  border: 1px solid rgba(206,17,45,.22);
  color: var(--gamma-red);
  font-weight: 900;
}

/* Título y texto */
.psc-title{
  font-weight: 900;
  letter-spacing: -0.02em;
}
.psc-text{
  color: rgba(0,0,0,.70);
}

/* Lista sin “fiesta” (si quieres emojis, se quedan, pero más sobrio) */
.psc-list li{
  font-size: 13px;
  color: rgba(0,0,0,.70);
  font-weight: 700;
}

/* Botones rectos */
.psc-btn{
  border-radius: 6px;
  padding: 11px 14px;
  font-weight: 900;
}
.psc-btn--solid{
  background: var(--gamma-red);
  border: 2px solid var(--gamma-red);
  color:#fff;
}
.psc-btn--outline{
  background: transparent;
  border: 2px solid rgba(0,0,0,.20);
  color:#111;
}
.psc-note{
  color: rgba(0,0,0,.55);
  font-size: 12px;
}

/* En móvil: que no se desmadre */
@media (max-width: 900px){
  .projects-send-card{ padding: 16px; }
}
/* ===== Banner promo tipo GAMMA (texto integrado) ===== */
.promo-hero{ padding: 18px 0 26px; background:#fff; }

.promo-hero-card{
  position:relative;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  overflow:hidden;
  height: clamp(220px, 28vw, 340px);
  background:#f5f5f5;
}

/* Imagen full */
.promo-hero-bg{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}

/* Scrim (muy sutil, elegante) */
.promo-hero-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.22) 100%);
}

/* Layout texto */
.promo-hero-left,
.promo-hero-right{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  color:#fff;
  z-index:2;
}

.promo-hero-left{ left: clamp(16px, 2.4vw, 28px); }
.promo-hero-right{ right: clamp(16px, 2.4vw, 28px); text-align:right; }

/* Tipografía tipo “cartel” */
.promo-kicker{
  margin:0 0 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .92;
}

.promo-title{
  margin:0;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.promo-sub{
  margin: 8px 0 0;
  font-size: clamp(16px, 2.1vw, 28px);
  font-weight: 800;
  opacity: .95;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.promo-date{
  margin:0 0 12px;
  font-size: clamp(16px, 2.2vw, 34px);
  font-weight: 700;
  opacity: .92;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Botón blanco (como el look GAMMA) */
.promo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}
.promo-btn:hover{ transform: translateY(-1px); }

/* Responsive */
@media (max-width: 820px){
  .promo-hero-card{ height: 320px; }
  .promo-hero-right{
    top: auto;
    bottom: 16px;
    transform:none;
    text-align:left;
    left: clamp(16px, 2.4vw, 28px);
    right: auto;
  }
  .promo-hero-scrim{
    background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.10) 100%);
  }
}
/* ===== Banner superior (slot) ===== */
.top-banner { margin: 16px 0 10px; }
.top-banner.is-empty { display: none; }

.top-banner-card{
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.14);   /* gris Gamma */
  background: #f6f6f6;
  overflow: hidden;
  text-decoration: none;
  color: white;
}

/* Línea roja fina “Gamma-like” */
.top-banner-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: #d6001c;
}

/* Imagen de fondo suave (opcional) */
.top-banner-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: .22;                 /* suave */
  filter: grayscale(1) contrast(1.05);
  pointer-events:none;
}

/* Capa para mejorar lectura */
.top-banner-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: #CE112D;
  pointer-events:none;
}

.top-banner-content, .top-banner-right{ position: relative; z-index: 1; }

.top-banner-kicker{
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: white;
  font-weight: 700;
}

.top-banner-title{
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.top-banner-sub{
  margin: 6px 0 0;
  font-size: 16px;
  color: rgba(0,0,0,.70);
  font-weight: 600;
}

.top-banner-right{
  justify-self: end;
  text-align: right;
}

.top-banner-date{
  margin: 0 0 10px;
  font-weight: 700;
  color: rgba(0,0,0,.60);
}

.top-banner-btn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.top-banner-card:hover .top-banner-btn{
  border-color: rgba(214,0,28,.55);
}

/* Responsive */
@media (max-width: 820px){
  .top-banner-card{ grid-template-columns: 1fr; text-align: left; }
  .top-banner-right{ justify-self: start; text-align:left; margin-top: 6px; }
  .top-banner-title{ font-size: 28px; }
}
/* HERO */
.hero-escaparate{
  padding: 18px 0 0;        /* separa del header */
}

/* marco que limita el ancho */
.hero-frame{
  position: relative;
  height: 78vh;             /* conservamos tu altura */
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #d9d9d9;         /* gris GAMMA */
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  background: #eee;
}

.hero-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* tu overlay igual, pero adaptado */
.hero-frame .hero-overlay{
  position: absolute;
  top: 60px;
  left: 60px;
  background: rgba(255,255,255,0.92);
  padding: 22px 26px;
  max-width: 420px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  border-radius: 14px; /* un pelín más fino/elegante */
}

.hero-frame .hero-overlay h1{
  font-size: 26px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.hero-frame .hero-overlay p{
  font-size: 14px;
  margin-bottom: 14px;
  color:#333;
}

/* responsive: en móvil que no se corte */
@media (max-width: 680px){
  .hero-frame{ height: 62vh; }
  .hero-frame .hero-overlay{
    left: 16px;
    right: 16px;
    top: 16px;
    max-width: none;
  }
}

/* ===============================
   FIX REBAJAS (ROJO TOTAL + SIN BORDES)
   Pega esto AL FINAL del CSS
   =============================== */

/* 1) El section: rojo y sin borde/sombra */
.top-banner{
  background: var(--gamma-red, #d6001c) !important;
  padding: 18px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) Si el HTML tiene is-empty, que NO afecte visualmente */
.top-banner.is-empty{
  background: var(--gamma-red, #d6001c) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) La “tarjeta” por dentro: también roja, sin borde */
.top-banner-card{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;

  background: var(--gamma-red, #d6001c) !important;
  color:#fff !important;

  border: 0 !important;            /* <- quita borde */
  outline: 0 !important;
  box-shadow: none !important;      /* <- quita sombra */
  border-radius: 0 !important;      /* <- si quieres sin redondeo total */
  padding: 18px 0 !important;       /* <- que respete el container */
  text-decoration:none !important;
}

/* 4) Imagen fuera (como quieres) */
.top-banner-img{ display:none !important; }

/* 5) Textos blancos */
.top-banner-kicker{
  color: rgba(255,255,255,.9) !important;
}
.top-banner-title{
  color:#fff !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  margin:0 !important;
  line-height:1 !important;
}
.top-banner-sub{
  color: rgba(255,255,255,.95) !important;
}

/* 6) Columna derecha */
.top-banner-right{
  margin-left:auto !important;
  text-align:right !important;
}
.top-banner-date{
  color: rgba(255,255,255,.95) !important;
  font-weight: 800 !important;
  margin:0 0 10px 0 !important;
}

/* 7) Botón blanco */
.top-banner-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  background:#fff !important;
  color:#111 !important;
  font-weight:900 !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
}
.top-banner-btn::after{
  content:"→";
  color: var(--gamma-red, #d6001c);
  font-size: 18px;
}

/* Responsive */
@media (max-width: 820px){
  .top-banner-card{flex-direction:column !important; align-items:flex-start !important;}
  .top-banner-right{margin-left:0 !important; text-align:left !important;}
}
/* ===============================
   PROMO HERO (rebajas) - mantiene su color Gamma
   Pega esto AL FINAL del CSS
   =============================== */

:root{
  --promo-red: var(--gamma-red, #d6001c);
}

/* La sección no mete bordes ni fondos raros */
.promo-hero{
  background: #fff;
  padding: 18px 0 26px;
}

/* Tarjeta: borde fino y consistente */
.promo-hero-card{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  overflow: hidden;
  background: #f5f5f5;
  position: relative;
}

/* Scrim con tinte rojo (para que SIEMPRE se note “Gamma”) */
.promo-hero-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--promo-red) 70%, #000 30%) 0%,
      rgba(0,0,0,.25) 45%,
      rgba(0,0,0,.10) 70%,
      color-mix(in srgb, var(--promo-red) 55%, #000 45%) 100%
    );
}

/* Fallback por si el navegador no soporta color-mix */
@supports not (color: color-mix(in srgb, red 50%, white)){
  .promo-hero-scrim{
    background: linear-gradient(90deg, rgba(214,0,28,.65) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,.10) 70%, rgba(214,0,28,.45) 100%);
  }
}

/* Botón: blanco con detalle rojo Gamma */
.promo-btn{
  background:#fff;
  color:#111;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}
.promo-btn:hove/* ===============================
   TOP BANNER (estrecho) - ROJO SOLIDO
   Pega esto AL FINAL del CSS
   =============================== */

.top-banner{
  background: transparent;        /* nada de fondo fuera */
  padding: 12px 0;               /* estrecho */
}

.top-banner-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;

  background: var(--gamma-red, #CE112D); /* ROJO SOLIDO */
  color:#fff;

  border: 0;                      /* sin borde exterior */
  border-radius: 16px;

  padding: 14px 18px;             /* compacto */
  text-decoration:none;

  box-shadow: none;               /* sobrio: sin “caja” */
}

/* Texto */
.top-banner-kicker{
  margin:0 0 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.top-banner-title{
  margin:0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.0;
  color:#fff;
}

.top-banner-sub{
  margin:6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

/* Derecha */
.top-banner-right{
  text-align:right;
  flex: 0 0 auto;
}

.top-banner-date{
  margin:0 0 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
}

/* Botón blanco (contraste) */
.top-banner-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background:#fff;
  color:#111;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 12px;
}

.top-banner-btn::after{
  content:"→";
  color: var(--gamma-red, #CE112D);
  font-weight: 900;
}

/* Responsive */
@media (max-width: 820px){
  .top-banner-card{
    flex-direction: column;
    align-items:flex-start;
    border-radius: 14px;
  }
  .top-banner-right{
    text-align:left;
  }
}
teY(-1px);
}

/* Si quieres el “detalle rojo” en el botón */
.promo-btn::after{
  content:" →";
  color: var(--promo-red);
  font-weight: 900;
}
/* ===============================
   TOP BANNER (estrecho) - ROJO SOLIDO
   Pega esto AL FINAL del CSS
   =============================== */

.top-banner{
  background: transparent;        /* nada de fondo fuera */
  padding: 12px 0;               /* estrecho */
}

.top-banner-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;

  background: var(--gamma-red, #CE112D); /* ROJO SOLIDO */
  color:#fff;

  border: 0;                      /* sin borde exterior */
  border-radius: 16px;

  padding: 14px 18px;             /* compacto */
  text-decoration:none;

  box-shadow: none;               /* sobrio: sin “caja” */
}

/* Texto */
.top-banner-kicker{
  margin:0 0 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.top-banner-title{
  margin:0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.0;
  color:#fff;
}

.top-banner-sub{
  margin:6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

/* Derecha */
.top-banner-right{
  text-align:right;
  flex: 0 0 auto;
}

.top-banner-date{
  margin:0 0 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
}

/* Botón blanco (contraste) */
.top-banner-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background:#fff;
  color:#111;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 12px;
}

.top-banner-btn::after{
  content:"→";
  color: var(--gamma-red, #CE112D);
  font-weight: 900;
}

/* Responsive */
@media (max-width: 820px){
  .top-banner-card{
    flex-direction: column;
    align-items:flex-start;
    border-radius: 14px;
  }
  .top-banner-right{
    text-align:left;
  }
}
/* =========================================
   MODO RECTO: SIN CURVAS EN NINGÚN SITIO
   Pegar AL FINAL del CSS
   ========================================= */

/* 1) Quitar redondeos globalmente */
*{
  border-radius: 0 !important;
}

/* 2) Quitar “pastillas” y efectos redondeados típicos */
button,
a,
input,
select,
textarea,
summary{
  border-radius: 0 !important;
}

/* 3) (Opcional) Si algún elemento usa máscaras/overflow para curvas */
.top-banner-card,
.promo-hero-card,
.gg-band-card,
.download-card,
.projects-send-card,
.service-card,
.product-card,
.project-card,
.form,
.faq-item,
.contact-card,
.about-media,
.modal-content{
  border-radius: 0 !important;
  overflow: visible !important; /* evita recortes con esquinas */
}

/* =========================
   TOP BANNER (ROJO SOLIDO)
   ========================= */

/* Sección roja (fondo a todo lo ancho) */
.top-banner{
  background: #d6001c; /* rojo GAMMA */
  padding: 18px 0;
}

/* Tarjeta interior (contenido alineado al container) */
.top-banner-card{
  display: flex;
  align-items: center;
  gap: 18px;

  background: #d6001c;
  color: #fff;

  border: 0;
  border-radius: 0; /* sin curvas */

  padding: 18px 22px;
}

/* =========================
   CONTENIDO IZQUIERDA
   ========================= */

.top-banner-content{
  max-width: 70%;
}

/* Textos */
.top-banner-kicker{
  margin: 0 0 4px;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;

  opacity: .9;
}

.top-banner-title{
  margin: 0;

  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.top-banner-sub{
  margin-top: 6px;

  font-size: 14px;
  font-weight: 600;

  opacity: .95;
}

/* =========================
   CONTENIDO DERECHA
   ========================= */

.top-banner-right{
  margin-left: auto;
  text-align: right;
}

.top-banner-date{
  margin-bottom: 10px;
  font-weight: 800;
}

/* =========================
   BOTON (RECTO INDUSTRIAL)
   ========================= */

.top-banner-btn{
  display: inline-block;

  background: #fff;
  color: #111;

  font-weight: 900;
  padding: 10px 16px;

  text-decoration: none;
  border: 0;
  border-radius: 0; /* por si acaso */
}


/* 4) Badges/chips (que suelen ser redondos) */
.psc-badge,
.ds-chip,
.gg-chip,
.proj-badge,
.p-tag,
.ph-badge,
.pc-chip,
.bw-chip{
  border-radius: 0 !important;
}

/* 5) Botones “pill” */
.btn-primary,
.btn-secondary,
.btn-cta,
.promo-btn,
.gg-band-btn,
.psc-btn,
.ds-btn,
.btn-ghost,
.btn-banner,
.btn-on-red,
.btn-on-red-outline{
  border-radius: 0 !important;
}
/* SECCIÓN ROJA */
.top-banner{
  background:#d6001c;     /* rojo GAMMA */
  padding: 18px 0;
}

/* TARJETA INTERIOR = MISMO ANCHO QUE TODO */
.top-banner-card{
  display:flex;
  align-items:center;
  gap:18px;

  background:#d6001c;
  color:#fff;

  border:0;               /* ❌ fuera bordes */
  border-radius:0;        /* ❌ fuera curvas */

  padding:18px 22px;
}

/* IZQUIERDA */
.top-banner-content{
  max-width: 70%;
}

/* TEXTOS */
.top-banner-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 4px;
  opacity:.9;
}

.top-banner-title{
  font-size:38px;
  font-weight:900;
  margin:0;
  line-height:1;
}

.top-banner-sub{
  font-size:14px;
  font-weight:600;
  margin-top:6px;
  opacity:.95;
}

/* DERECHA */
.top-banner-right{
  margin-left:auto;
  text-align:right;
}

.top-banner-date{
  font-weight:800;
  margin-bottom:10px;
}

/* BOTÓN RECTO, INDUSTRIAL */
.top-banner-btn{
  display:inline-block;
  background:#fff;
  color:#111;
  font-weight:900;
  padding:10px 16px;
  text-decoration:none;
  border:0;
}
.ds24-duo-banners{
  width: min(1200px, 92%);
  margin: 28px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.ds24-banner{
  position: relative;
  display: block;
  min-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transform: translateZ(0);
}

.ds24-banner__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.0) 75%);
}

.ds24-banner__content{
  position: absolute;
  inset: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  color: #fff;
}

.ds24-banner__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #d20a11; /* rojo gamma */
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.ds24-banner__title{
  margin: 0;
  font-size: clamp(22px, 2.4vw, 40px);
  line-height: 1.05;
  font-weight: 800;
  text-shadow: 0 2px 14px rgba(0,0,0,.40);
}

.ds24-banner__arrow{
  margin-top: 10px;
  font-size: 28px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ds24-banner:hover{
  transform: translateY(-2px);
}

.ds24-banner:hover .ds24-banner__overlay{
  background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.05) 80%);
}

@media (max-width: 900px){
  .ds24-duo-banners{
    grid-template-columns: 1fr;
  }
  .ds24-banner{
    min-height: 240px;
  }
  .ds24-banner__content{
    padding: 22px;
  }
}
/* ====== GAMMA LOOK (tamaño normal) ====== */
.ds24-gamma{
  width: min(1200px, 92%);   /* como el resto */
  margin: 50px auto;         /* normal */
}

.ds24-gamma .ds24-section-head{
  align-items: center;
  margin-bottom: 14px;
}

.ds24-gamma .ds24-section-head h2{
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.5px;
  font-size: clamp(22px, 2.6vw, 36px); /* tamaño normal */
}

.ds24-gamma .ds24-section-head h2::after{
  content:"";
  display:block;
  width: 64px;
  height: 3px;
  margin-top: 10px;
  background: #d20a11; /* rojo GAMMA */
  border-radius: 99px;
}

/* Flechas discretas */
.ds24-gamma .ds24-btn-nav{
  width: 44px;
  height: 44px;
  font-size: 24px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.ds24-gamma .ds24-btn-nav:hover{
  border-color: rgba(210,10,17,.35);
}

/* Slider compacto */
.ds24-gamma .ds24-slider{
  gap: 26px;
  padding: 8px 2px 14px;
}

/* 2 visibles */
.ds24-gamma .ds24-card{
  flex: 0 0 calc(50% - 13px);
}

/* Imagen normal, limpia */
.ds24-gamma .ds24-card-img{
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
}

/* Tipografía más “GAMMA” pero sin gigante */
.ds24-gamma .ds24-card-title{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 16px 0 10px;
  line-height: 1.15;
}

/* Precios más contenidos */
.ds24-gamma .ds24-price-now{
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.ds24-gamma .ds24-price-old{
  font-size: 16px;
  opacity: .5;
  text-decoration: line-through;
}

/* Puntito rojo opcional (sutil) */
.ds24-gamma .ds24-price-now::after{
  content:"";
  display:inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d20a11;
  margin-left: 8px;
  transform: translateY(-8px);
}

/* Scrollbar fina */
.ds24-gamma .ds24-slider::-webkit-scrollbar{ height: 9px; }
.ds24-gamma .ds24-slider::-webkit-scrollbar-thumb{
  background: rgba(210,10,17,.20);
  border-radius: 999px;
}

/* Móvil: 1 visible */
@media (max-width: 900px){
  .ds24-gamma .ds24-card{ flex-basis: 88%; }
  .ds24-gamma .ds24-btn-nav{ display:none; }
}
/* ====== OFERTAS BAÑO · 4 EN LÍNEA ====== */

#ofertas-bano .ds24-slider{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 en línea */
  gap: 28px;
  overflow: visible;
  padding: 0;
}

#ofertas-bano .ds24-card{
  flex: unset;
  width: 100%;
}

/* Ocultamos flechas porque ya no hay slider */
#ofertas-bano .ds24-nav{
  display: none;
}

/* Ajustes visuales GAMMA */
#ofertas-bano .ds24-card-img{
  aspect-ratio: 4 / 3;
}

#ofertas-bano .ds24-card-title{
  font-size: 18px;
  line-height: 1.15;
}

#ofertas-bano .ds24-price-now{
  font-size: 32px;
}

#ofertas-bano .ds24-price-old{
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1100px){
  #ofertas-bano .ds24-slider{
    grid-template-columns: repeat(2, 1fr); /* 2 en tablet */
  }
}

@media (max-width: 650px){
  #ofertas-bano .ds24-slider{
    grid-template-columns: 1fr; /* 1 en móvil */
  }
}
/* QUIENES SOMOS: foto a la derecha */
.about-media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #f6f6f6;
  min-height: 320px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

.about-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Si quieres conservar un toque “GAMMA” sutil encima */
.about-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(210,10,17,.10), rgba(0,0,0,0));
  pointer-events:none;
}
/* SUGERENCIAS: layout + tarjetas */
.suggestions-wrap{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}

.suggestions-info{
  display: grid;
  gap: 18px;
}

.sug-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 18px 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.sug-card h3{
  margin: 0 0 10px;
  font-size: 18px;
}

.sug-list{
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
  color: rgba(0,0,0,.78);
}

.sug-card--accent{
  border-color: rgba(210,10,17,.18);
  background: linear-gradient(135deg, rgba(210,10,17,.06), rgba(0,0,0,0));
}

.sug-actions{
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.sug-form{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.sug-bottom{
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.sug-legal{
  margin: 0;
  font-size: 13px;
  opacity: .75;
}

/* Responsive */
@media (max-width: 980px){
  .suggestions-wrap{
    grid-template-columns: 1fr;
  }
}
/* ===== OFERTAS: 4 elementos en una fila y fotos más pequeñas ===== */

#ofertas-bano .ds24-slider{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas */
  gap: 18px;
  overflow: visible;
  padding: 0;
}

/* tarjeta compacta */
#ofertas-bano .ds24-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
}

/* IMAGEN más baja */
#ofertas-bano .ds24-card-img{
  height: 140px;              /* <-- baja aquí si quieres aún más pequeña */
  border-radius: 12px;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 10px;
}

#ofertas-bano .ds24-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* recorta sin deformar */
  display: block;
}

/* textos más contenidos */
#ofertas-bano .ds24-card-title{
  font-size: 14px;
  line-height: 1.15;
  margin: 0 0 10px;
}

/* precios más pequeños */
#ofertas-bano .ds24-price-now{ font-size: 22px; }
#ofertas-bano .ds24-price-old{ font-size: 13px; opacity: .55; }

/* Oculta flechas si ya caben los 4 (opcional) */
#ofertas-bano .ds24-nav{ display: none; }

/* Responsive */
@media (max-width: 1100px){
  #ofertas-bano .ds24-slider{ grid-template-columns: repeat(2, 1fr); }
  #ofertas-bano .ds24-card-img{ height: 150px; }
}

@media (max-width: 650px){
  #ofertas-bano .ds24-slider{ grid-template-columns: 1fr; }
}
/* ===== PROYECTOS: estilo banner tipo REBAJAS ===== */

.promo-band{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: center;

  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;

  text-decoration: none;
  color: inherit;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.promo-band__topline{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: #d20a11; /* rojo GAMMA */
}

.promo-band__left{
  padding: 22px 22px 22px;
}

.promo-band__kicker{
  display: inline-block;
  font-weight: 800;
  letter-spacing: .14em;
  font-size: 12px;
  color: #d20a11;
  margin: 0 0 10px;
}

.promo-band__title{
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.6px;
  line-height: 1.05;
}

.promo-band__text{
  margin: 0 0 16px;
  font-size: 18px;
  opacity: .78;
}

.promo-band__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.promo-band__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
}

.promo-band__btn--solid{
  background: #d20a11;
  color: #fff;
  border-color: #d20a11;
}

.promo-band__btn--ghost{
  background: #fff;
  color: #111;
}

.promo-band__right{
  height: 100%;
  min-height: 220px;
  background: #f3f3f3;
}

.promo-band__right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover sutil como Gamma */
.promo-band:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}
.promo-band:hover .promo-band__btn--solid{
  filter: brightness(0.95);
}

/* Responsive */
@media (max-width: 900px){
  .promo-band{
    grid-template-columns: 1fr;
  }
  .promo-band__right{
    min-height: 180px;
  }
}
/* =========================
   DS24 Slider - 4 en línea
   ========================= */
.ds24-section-slider {
  padding: 46px 0;
}

.ds24-section-slider .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ds24-nav {
  display: flex;
  gap: 10px;
}

.ds24-btn-nav {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #e7e7e7;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ds24-btn-nav:hover {
  border-color: #d0102a;
}

/* Aquí va lo importante: 4 cards visibles */
.ds24-slider {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  overflow: hidden;        /* sin scroll */
  scroll-behavior: smooth;
}

.ds24-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.ds24-card-img {
  width: 100%;
  height: 140px;           /* altura controlada */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fafafa;
  overflow: hidden;
}

.ds24-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* para que no “reviente” la foto */
}

.ds24-card-title {
  margin: 12px 0 10px;
  font-size: 14px;
  line-height: 1.25;
  min-height: 52px;        /* alinea títulos */
  color: #111;
}

.ds24-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ds24-price-now {
  font-weight: 800;
  font-size: 20px;
  color: #111;
}

.ds24-price-old {
  color: #777;
  text-decoration: line-through;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1100px) {
  .ds24-slider { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ds24-section-slider .section-head { flex-direction: column; align-items: flex-start; }
  .ds24-slider { grid-template-columns: 1fr; }
}
/* =========================
   Sugerencias - más pro
   ========================= */
.suggestions-wrap{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
  align-items: start;
}

.sug-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.sug-card--accent{
  border-color: rgba(208,16,42,.25);
  background: linear-gradient(180deg, rgba(208,16,42,.06), rgba(255,255,255,1));
}

.sug-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: #222;
}

.sug-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.sug-form{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.sug-bottom{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.sug-legal{
  color: #666;
  font-size: 13px;
}

@media(max-width: 900px){
  .suggestions-wrap{ grid-template-columns: 1fr; }
}
/* =========================
   MODALES (ventana flotante)
   ========================= */
.ds24-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.ds24-modal.is-open{
  display: block;
}

.ds24-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}

.ds24-modal__panel{
  position: relative;
  width: min(920px, calc(100% - 28px));
  margin: 6vh auto;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #eee;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}

.ds24-modal__head{
  padding: 18px 18px 8px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(180deg, rgba(214,0,28,.06), rgba(255,255,255,1));
}

.ds24-modal__kicker{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d6001c;
}

.ds24-modal__title{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: #111;
}

.ds24-modal__sub{
  margin: 6px 0 0;
  color: #444;
  font-size: 14px;
}

.ds24-modal__form{
  padding: 16px 18px 18px;
}

.ds24-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #eee;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
}

.ds24-modal__close:hover{
  border-color: rgba(214,0,28,.35);
}

.ds24-modal__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 640px){
  .ds24-modal__panel{
    margin: 4vh auto;
  }
}
/* =========================
   CONTACTO – versión pro
   ========================= */

.contact.section{
  padding: clamp(40px, 5vw, 80px) 0;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

/* Cards */
.contact-cards{
  display: grid;
  gap: 18px;
}

.contact-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
}

.contact-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
}

.contact-card p{
  margin: 0;
  line-height: 1.5;
  color: #222;
}

.contact-card a{
  color: #d6001c;
  font-weight: 700;
  text-decoration: none;
}

.contact-card a:hover{
  text-decoration: underline;
}

/* Card acciones */
.contact-card--actions{
  border-color: rgba(214,0,28,.25);
  background: linear-gradient(180deg, rgba(214,0,28,.06), #fff);
}

.contact-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Imagen */
.contact-media{
  display: flex;
  justify-content: flex-end;
}

.contact-photo{
  width: 100%;	
  max-width: 520px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.14),
    0 12px 30px rgba(0,0,0,.10);
}

/* Responsive */
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
  }

  .contact-media{
    justify-content: flex-start;
  }

  .contact-photo{
    max-width: 100%;
  }
}
/* =========================
   BLOG GAMMA (3 cards)
   ========================= */
.blog-gamma{
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
}

.blog-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.blog-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}

.blog-media{
  display:block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .35s ease;
}

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

.blog-body{
  padding: 16px 16px 18px;
  display: grid;
  gap: 10px;
}

.blog-title{
  margin:0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}

.blog-title a{
  color:#111;
  text-decoration:none;
}

.blog-title a:hover{
  color:#d6001c;
}

.blog-excerpt{
  margin:0;
  color:#444;
  line-height: 1.5;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-cta{
  font-weight: 800;
  color:#d6001c;
  text-decoration:none;
  margin-top: 2px;
}

.blog-cta:hover{
  text-decoration: underline;
}

.blog-footer{
  margin-top: 18px;
  display:flex;
  justify-content:flex-start;
}

@media (max-width: 980px){
  .blog-grid{ grid-template-columns: 1fr; }
}
:root{
  --gg-dark: #2B2C2D;
  --gg-red:  #C4303E;
  --gg-gray: #5A6066;
  --gg-white:#FFFFFF;
}

:root{
  --gg-dark: #2B2C2D;
  --gg-red:  #C4303E;
  --gg-gray: #5A6066;
  --gg-white:#FFFFFF;
}

/* BANNER EXPERTOS (blanco) */
.expert-band{
  background: var(--gg-white);
  border-bottom: 1px solid rgba(90,96,102,.25); /* separador gris suave */
}

.expert-band .band-inner{
  padding: 10px 0;
}

.expert-kicker{
  color: var(--gg-red);          /* “Somos expertos en” en rojo */
  font-weight: 800;
  margin: 0;
}

.expert-list{
  color: var(--gg-dark);         /* resto en negro/gris del cartel */
  margin: 0;
  font-weight: 500;
}

.expert-sep{
  color: var(--gg-gray);         /* separadores en gris */
  padding: 0 .35rem;
}
:root{
  --gg-dark: #2B2C2D;
  --gg-red:  #C4303E;
  --gg-gray: #5A6066;
  --gg-white:#FFFFFF;
}

/* BANNER EXPERTOS (blanco) */
.expert-band{
  background: var(--gg-white);
  border-bottom: 1px solid rgba(90,96,102,.25); /* separador gris suave */
}

.expert-band .band-inner{
  padding: 10px 0;
}

.expert-kicker{
  color: var(--gg-red);          /* “Somos expertos en” en rojo */
  font-weight: 800;
  margin: 0;
}

.expert-list{
  color: var(--gg-dark);         /* resto en negro/gris del cartel */
  margin: 0;
  font-weight: 500;
}

.expert-sep{
  color: var(--gg-gray);         /* separadores en gris */
  padding: 0 .35rem;
}
/* FOOTER estilo cartel */
.footer{
  background: var(--gg-dark);
  color: var(--gg-white);
  border-top: 3px solid var(--gg-red); /* franja roja como acento */
}

.footer strong{
  letter-spacing: .5px;
}

.footer .footer-links a{
  color: var(--gg-white);
  text-decoration: none;
  font-weight: 600;
  opacity: .95;
}

.footer .footer-links .sep{
  color: var(--gg-gray);
  margin: 0 .5rem;
}

/* Hover con rojo del cartel */
.footer .footer-links a:hover{
  color: var(--gg-red);
}




/* ===============================
   AJUSTES DS24 (Servicios, Contacto, Sugerencias, Expert Band)
   =============================== */

/* 1) Banner "Somos expertos en" (fondo blanco, kicker rojo, separador gris) */
#expertBanner.expert-band{ background: var(--gg-white); }
#expertBanner.expert-band{ border-top: 1px solid rgba(90,96,102,.18); }
#expertBanner .band-row{ display:flex; gap: 14px; align-items:center; flex-wrap:wrap; }
#expertBanner .expert-kicker{ letter-spacing:.2px; text-transform: none; }
#expertBanner .expert-list{ letter-spacing:.2px; }
#expertBanner .expert-sep{ opacity:.95; }

/* 2) SERVICIOS: el HTML usa .services-grid (no .service-grid). Lo igualamos y mejoramos. */
.services{
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0) 55%);
}
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 14px;
}
.service-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 160px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.service-ico{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(196,48,62,.35);
  color: var(--gg-red);
  background: rgba(196,48,62,.06);
  margin-bottom: 2px;
}
.service-card h3{
  font-size: 16px;
  margin: 0;
}
.service-card p{
  font-size: 13.5px;
  color: #3b3f44;
  margin: 0;
}
@media (max-width: 980px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* 3) CONTACTO: imagen + mapa bien repartidos */
.contact-grid{
  grid-template-columns: 1.05fr .95fr;
  align-items: start;
}
.contact-media{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.contact-photo{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
  display:block;
}
.contact-map{
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
}
.contact-map iframe{
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display:block;
}
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-media{ grid-template-columns: 1fr; }
  .contact-photo, .contact-map, .contact-map iframe{ min-height: 260px; }
}

/* 4) SUGERENCIAS: igualar alturas de los dos bloques */
.suggestions-wrap{
  align-items: stretch;
}
.suggestions-info,
.sug-form{
  height: 100%;
}
.suggestions-info{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.sug-form{
  display:flex;
  flex-direction:column;
}
.sug-form .sug-bottom{
  margin-top: auto;
}
/* =========================================================
   BLOQUE "NOS ADAPTAMOS A TI" (Gamma-style)
   ========================================================= */

.gamma-adapt{
  background:#bfbfbf; /* gris similar al de tu captura */
  padding: 34px 0 22px;
}

.gamma-adapt__head{
  text-align:center;
  max-width: 980px;
  margin: 0 auto 18px;
}

.gamma-adapt__title{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #CE112D; /* rojo GAMMA */
  text-transform: none;
  font-size: clamp(22px, 2.2vw, 34px);
}

.gamma-adapt__lead{
  margin: 0 auto 14px;
  color: #1a1a1a;
  opacity: .9;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.45;
  font-weight: 600;
}

.gamma-adapt__big{
  margin: 0;
  color: #fff;
  font-weight: 900;
  font-size: clamp(18px, 2vw, 32px);
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* Grid de 4 columnas */
.gamma-adapt__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 22px;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* Card base */
.gamma-adapt__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height: 300px;
  padding: 28px 18px;
  text-decoration:none;
  position:relative;
  transition: transform .18s ease, filter .18s ease;
}

.gamma-adapt__card:hover{
  transform: translateY(-3px);
  filter: brightness(1.02);
}

.gamma-adapt__icon{
  width: 74px;
  height: 74px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 18px;
}

.ga-ico{
  width: 44px;
  height: 44px;
}

/* Tipos */
.gamma-adapt__h{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .22em;
  font-size: 15px;
}

.gamma-adapt__p{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  opacity: .95;
}

/* Variantes de color (imitan la imagen) */
.gamma-adapt__card.is-dark{
  background:#0f0f0f;
  color:#fff;
}
.gamma-adapt__card.is-dark .gamma-adapt__icon{
  background: rgba(255,255,255,.08);
  color:#fff;
}
.gamma-adapt__card.is-dark .gamma-adapt__h{ color:#fff; }

.gamma-adapt__card.is-mid{
  background:#6e6e6e;
  color:#fff;
}
.gamma-adapt__card.is-mid .gamma-adapt__icon{
  background: rgba(255,255,255,.10);
  color:#fff;
}
.gamma-adapt__card.is-mid .gamma-adapt__h{ color:#fff; }

.gamma-adapt__card.is-light{
  background:#ededed;
  color:#1a1a1a;
}
.gamma-adapt__card.is-light .gamma-adapt__icon{
  background: rgba(206,17,45,.10);
  color:#CE112D;
}
.gamma-adapt__card.is-light .gamma-adapt__h{ color:#CE112D; }

.gamma-adapt__card.is-gamma{
  background:#CE112D;
  color:#fff;
}
.gamma-adapt__card.is-gamma .gamma-adapt__icon{
  background: rgba(255,255,255,.14);
  color:#fff;
}
.gamma-adapt__card.is-gamma .gamma-adapt__h{ color:#fff; }

.gamma-adapt__h.is-red{ color:#CE112D; }

/* Responsive */
@media (max-width: 980px){
  .gamma-adapt__grid{ grid-template-columns: repeat(2, 1fr); }
  .gamma-adapt__card{ min-height: 260px; }
}

@media (max-width: 520px){
  .gamma-adapt{
    padding: 24px 0 14px;
  }
  .gamma-adapt__grid{ grid-template-columns: 1fr; }
  .gamma-adapt__card{ min-height: 220px; }
  .gamma-adapt__h{ letter-spacing: .18em; }
}

/* =========================
   DS24 FOOTER (TOP + MEGA)
   ========================= */

.ds24-footer-top{
  background:#efefef;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:14px 0;
}

.ds24-footer-top__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  align-items:center;
  text-align:center;
}

.ds24-footer-top__item h4{
  margin:0 0 6px;
  font-weight:800;
  color:#d60000;
  letter-spacing:.3px;
}

.ds24-footer-top__item a{
  color:#222;
  text-decoration:none;
  font-weight:600;
}

.ds24-footer-top__social{
  display:flex;
  gap:10px;
  justify-content:center;
}

.ds24-social{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  color:#111;
  text-decoration:none;
  font-weight:900;
}

/* Megafooter rojo */
.ds24-megafooter{
  background:#d60000; /* rojo GAMMA */
  color:#fff;
}

.ds24-megafooter__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:22px;
  padding:26px 0;
  align-items:center;
}

.ds24-megafooter__title{
  margin:0 0 12px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.ds24-megafooter__links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.ds24-megafooter__links a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}

.ds24-megafooter__center{
  display:grid;
  place-items:center;
}

.ds24-megafooter__icons{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
}

.ds24-megafooter__ico{
  width:46px;height:46px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  text-decoration:none;
  display:grid;place-items:center;
  font-weight:900;
}

.ds24-megafooter__legal{
  background:#fff;
  color:#333;
  padding:12px 0;
}

.ds24-megafooter__legal-row{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.ds24-megafooter__legal a{
  color:#333;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.25);
}

.ds24-megafooter__legal .sep{
  margin:0 8px;
  opacity:.7;
}

/* Responsive */
@media (max-width:2000px;){
  .ds24-footer-top__grid{ grid-template-columns:1fr; }
  .ds24-megafooter__grid{ grid-template-columns:1fr; text-align:center; }
  .ds24-megafooter__links{ justify-items:center; }

/* CONTACTO - imagen nave (que se vea completa) */
.contact-media{
  display: flex;
  align-items: stretch;
}

.contact-photo{
  width: 100%;
  height: auto;          /* clave */
  max-height: 520px;     /* ajusta si quieres más/menos alto */
  object-fit: contain;   /* clave: no recorta */
  display: block;
  background: #fff;      /* por si sobran bandas */
  border-radius: 16px;
}

.moves.section { padding: 56px 0; }

.moves-card{
  display: grid;
  grid-template-columns: 1.5fr .8fr;
  gap: 22px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.moves-left{ padding: 22px 22px 18px; }

.moves-kicker{
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 12px;
  color: #CE112D;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.moves-title{
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.1;
}

.moves-sub{
  margin: 0 0 14px;
  color: rgba(0,0,0,.72);
  max-width: 70ch;
}

.moves-list{
  margin: 0 0 16px;
  padding-left: 18px;
  color: rgba(0,0,0,.80);
}

.moves-list li{ margin: 8px 0; }

.moves-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.moves-note{
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(0,0,0,.65);
}

.moves-right{
  display: grid;
  place-items: center;
  padding: 22px;
  background: #f7f7f7;
}

.moves-badge{
  width: 100%;
  border-radius: 16px;
  padding: 18px 16px;
  border: 1px dashed rgba(0,0,0,.18);
  background: #fff;
  text-align: left;
}

.moves-badge-top{
  display:inline-block;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(206,17,45,.10);
  color: #CE112D;
  margin-bottom: 10px;
}

.moves-badge-big{
  display:block;
  font-weight: 900;
  font-size: 22px;
  margin: 2px 0 6px;
}

.moves-badge-sub{
  display:block;
  color: rgba(0,0,0,.68);
  font-size: 14px;
}

@media (max-width: 900px){
  .moves-card{ grid-template-columns: 1fr; }
  .moves-right{ order: -1; }
}

.moves-banner { padding: 22px 0; }

.moves-banner-link{
  display:block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transform: translateZ(0);
}

.moves-banner-img{
  display:block;
  width: 100%;
  height: auto;
}

.moves-banner-link:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
}
.nav-moves{
  margin-left:10px;
  padding:10px 14px;
  border-radius:999px;
  background:#0f766e;
  color:#fff !important;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.nav-moves:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}
.nav-moves:focus{
  outline:2px solid rgba(206,17,45,.35);
  outline-offset:2px;
}

@media (max-width: 860px){
  .nav-moves{
    width:100%;
    justify-content:center;
    margin-left:0;
  }
}
/* =========================
   CONTACTO
========================= */
.contact .section-head{
  margin-bottom: 18px;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: start;
}

.contact-cards{
  display: grid;
  gap: 18px;
}

.contact-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.contact-card h3{
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 800;
  color: #111;
}

.contact-card p{
  margin: 0;
  line-height: 1.55;
  color: #222;
}

.contact-card a{
  color: #c3001a;              /* rojo guarner */
  font-weight: 800;
  text-decoration: none;
}

.contact-card a:hover{
  text-decoration: underline;
}

/* Bloque "¿Cómo prefieres?" */
.contact-card--actions{
  background: linear-gradient(180deg, rgba(195,0,26,.10), rgba(195,0,26,.04));
  border-color: rgba(195,0,26,.18);
}

.contact-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Botones */
.btn-primary,
.btn-secondary{
  appearance: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 800;
  border: 2px solid #c3001a;
  cursor: pointer;
  transition: transform .06s ease, opacity .15s ease;
}

.btn-primary{
  background: #c3001a;
  color: #fff;
}

.btn-secondary{
  background: #fff;
  color: #c3001a;
}

.btn-primary:active,
.btn-secondary:active{
  transform: translateY(1px);
}

/* Imagen derecha */
.contact-media{
  display: flex;
  justify-content: center;
}

.contact-photo{
  width: 100%;
  max-width: 520px;
  border-radius: 0px; /* en tu captura parece “recta” */
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
  .contact-photo{
    max-width: 640px;
  }
}
/* =========================================================
   PARCHE LIMPIO (FINAL DEL CSS)
   - Arregla cortes y hover roto
   - Evita que el CSS se rompa
   - Banner superior estable (rebajas / promo)
   - Ds24-gamma completado
   ========================================================= */

/* 0) Arreglo del hover roto (tenías .promo-btn:hove...) */
.promo-btn:hover{
  transform: translateY(-1px);
}

/* 1) NO uses border-radius 0 global. Si lo tenías, neutralízalo aquí:
   (Esto solo “rescata” elementos clave) */
.top-banner-card,
.promo-hero-card,
.gg-band-card,
.download-card,
.projects-send-card,
.service-card,
.product-card,
.project-card,
.form,
.faq-item,
.contact-card,
.about-media,
.modal-content,
.ds24-banner{
  overflow: hidden;
}

/* 2) TOP BANNER rojo sólido, ancho contenido, compacto y bonito */
.top-banner{
  background: transparent;
  padding: 12px 0;
}
.top-banner-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;

  background: var(--gamma-red, #CE112D);
  color:#fff;

  border: 0;
  border-radius: 16px;
  padding: 14px 18px;

  text-decoration:none;
  box-shadow: none;
}
.top-banner-kicker{
  margin:0 0 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.top-banner-title{
  margin:0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.0;
  color:#fff;
}
.top-banner-sub{
  margin:6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}
.top-banner-right{
  text-align:right;
  flex: 0 0 auto;
}
.top-banner-date{
  margin:0 0 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
}
.top-banner-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background:#fff;
  color:#111;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
}
.top-banner-btn::after{
  content:"→";
  color: var(--gamma-red, #CE112D);
  font-weight: 900;
}
@media (max-width: 820px){
  .top-banner-card{
    flex-direction: column;
    align-items:flex-start;
    border-radius: 14px;
  }
  .top-banner-right{
    text-align:left;
  }
}

/* 3) ds24-gamma: bloque completo y estable (sin selector roto) */
.ds24-gamma{
  width: min(1200px, 92%);
  margin: 50px auto;
}
.ds24-gamma .ds24-section-head{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.ds24-gamma .ds24-section-head h2{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2.6vw, 36px);
  color: #111;
}
.ds24-gamma .ds24-section-head h2::after{
  content:"";
  display:block;
  width: 64px;
  height: 3px;
  margin-top: 10px;
  background: var(--gamma-red, #CE112D);
  border-radius: 999px;
}
/* CONTACTO — forzado para que quede como la imagen */
#contacto .contact-layout{
  display: grid !important;
  grid-template-columns: 1.05fr 1.35fr;
  grid-template-areas:
    "left right"
    "map  map";
  gap: 18px;
  align-items: stretch;
}

#contacto .contact-left{ grid-area: left; }
#contacto .contact-right{ grid-area: right; }
#contacto .contact-map{ grid-area: map; }

#contacto .contact-box{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
}

#contacto .contact-left{
  padding: 16px;
  border-radius: 14px;
}

#contacto .contact-cards{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#contacto .contact-card{
  border: 0;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

#contacto .contact-card h3{
  margin: 0 0 10px;
  font-weight: 800;
}

#contacto .contact-card a{
  color: var(--gamma-red, #CE112D);
  font-weight: 800;
  text-decoration: none;
}

#contacto .contact-pref{
  margin-top: 14px;
  padding: 14px;
  background: #fff6f6;
  border: 1px solid #ffd6d6;
  border-radius: 12px;
}

#contacto .contact-pref h3{
  margin: 0 0 10px;
  font-weight: 800;
}

#contacto .contact-actions{
  display: flex !important;
  gap: 12px;
  flex-wrap: wrap;
}

/* FOTO */
#contacto .contact-right{
  padding: 0;
}

#contacto .contact-photo{
  width: 100% !important;
  height: 100% !important;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

/* MAPA */
#contacto .contact-map iframe{
  width: 100% !important;
  height: 260px;
  border: 0;
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  #contacto .contact-layout{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "left"
      "right"
      "map";
  }
  #contacto .contact-cards{
    grid-template-columns: 1fr !important;
  }
  #contacto .contact-photo{
    min-height: 260px;
  }
  #contacto .contact-map iframe{
    height: 300px;
  }
}
/* =========================
   MOVES III EN EL MENÚ
   ========================= */

.nav-moves{
  display: flex;
  align-items: center;
  margin-left: 16px;
  pointer-events: none; /* sin link, sin hover */
}

.nav-moves img{
  height: 42px;              /* AJUSTA si lo quieres más grande/pequeño */
  max-width: 260px;
  object-fit: contain;
  display: block;
}

/* Responsive: en móvil lo reducimos */
@media (max-width: 900px){
  .nav-moves img{
    height: 32px;
    max-width: 200px;
  }
}
/* NAV layout (si ya lo tienes, no borres nada: añade esto) */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
}

/* Botón MOVES a la derecha */
.nav-moves{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.nav-moves img{
  height:28px;
  width:auto;
  display:block;
}

.nav-moves-text{
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
  color:#111;
  white-space:nowrap;
}

.nav-moves:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  background:#fff;
}

.nav-moves:active{
  transform:translateY(0);
}

/* Móvil: que no moleste */
@media (max-width: 768px){
  .nav{
    gap:12px;
  }
  .nav-moves{
    padding:6px 10px;
  }
  .nav-moves-text{
    display:none; /* deja solo el icono en móvil */
  }
  .nav-moves img{
    height:26px;
  }
}
/* FIX: en escritorio, 2 tarjetas en 2 columnas (media anchura) */
.contact-cards{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px;
  align-items: start;
}

.contact-card{
  width: 100%;
  max-width: 100%;
}

/* En pantallas pequeñas, 1 columna */
@media (max-width: 900px){
  .contact-cards{
    grid-template-columns: 1fr !important;
  }
}
/* ===========================
   DS24 · DUO BANNERS (2 cards)
   - MODO RECTO (sin curvas)
   - Fondo con imagen por CSS var(--bg)
   =========================== */

.ds24-duo-banners{
  width: min(1120px, calc(100% - 40px));
  margin: 28px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.ds24-banner{
  position: relative;
  display: block;
  min-height: 280px;
  text-decoration: none;
  color: #fff;

  border: 1px solid rgba(0,0,0,.18);
  border-radius: 0;            /* recto */
  overflow: hidden;

  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transform: translateZ(0);
}

/* Overlay para legibilidad */
.ds24-banner__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.40) 46%, rgba(0,0,0,.10) 74%, rgba(0,0,0,.35) 100%);
}

/* Contenido */
.ds24-banner__content{
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 18px 18px;
  display: grid;
  align-content: start;
  gap: 10px;
  max-width: 78%;
}

/* Tag superior (kicker) */
.ds24-banner__kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.ds24-banner__kicker::before{
  content:"";
  width: 10px;
  height: 10px;
  background: var(--gamma-red, #CE112D);
  border: 1px solid rgba(255,255,255,.55);
}

/* Título / texto */
.ds24-banner__title{
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 900;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.ds24-banner__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
  max-width: 60ch;
}

/* Chips (opcional) */
.ds24-banner__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.ds24-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.94);
  border-radius: 0; /* recto */
}

.ds24-chip::before{
  content:"";
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

/* CTA abajo */
.ds24-banner__actions{
  margin-top: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ds24-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  font-weight: 900;
  border-radius: 0; /* recto */
  border: 1px solid rgba(255,255,255,.75);
  text-decoration: none;
  white-space: nowrap;
}

.ds24-btn--white{
  background: #fff;
  color: #111;
  border-color: rgba(255,255,255,.85);
}

.ds24-btn--white::after{
  content:" →";
  color: var(--gamma-red, #CE112D);
  font-weight: 900;
}

.ds24-btn--ghost{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.28);
}

.ds24-banner:hover{
  border-color: rgba(206,17,45,.28);
}

/* Responsive */
@media (max-width: 980px){
  .ds24-duo-banners{
    grid-template-columns: 1fr;
  }
  .ds24-banner__content{
    max-width: 92%;
  }
  
  /* ✅ FIX: el bloque de banners NO debe usar 100vw ni desbordar */
.ds24-duo-banners{
  width: 100%;
  max-width: 1200px;            /* ajusta si tu .container usa otro ancho */
  margin: 24px auto;
  padding: 0 16px;              /* mismo “aire” que el resto de secciones */
  box-sizing: border-box;
}

/* ✅ Grid que encoge bien (clave: minmax(0,1fr)) */
.ds24-duo-banners__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  width: 100%;
}

/* ✅ Tarjetas no pueden empujar el ancho */
.ds24-banner{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* ✅ Si dentro hay imágenes */
.ds24-banner img{
  display:block;
  max-width:100%;
  height:auto;
}

/* ✅ Móvil */
@media (max-width: 900px){
  .ds24-duo-banners__grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* (Opcional) Si aún te aparece scroll horizontal por otra cosa:
body{ overflow-x:hidden; }
*/

}

.ds24-banner{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  min-height: 220px;

  /* ✅ imagen */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* por si NO hay imagen, fallback gris */
  background-color: #e9e9e9;
}

/* oscurece un poco para que se lea el texto */
.ds24-banner__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.10));
  pointer-events: none;
}

.ds24-banner__content{
  position: relative; /* para quedar por encima del overlay */
  z-index: 1;
  padding: 22px;
  color: #fff;
}
/* sección roja a ancho completo sin “overflow” */
.ds24-redbajas{
  width: 100%;
  max-width: 100%;
  overflow: hidden;          /* evita que algo interno rompa */
}

/* contenedor interno centrado como el resto de la web */
.ds24-redbajas .container{
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: 28px 0;
}

/* por si tienes una fila interna */
.ds24-redbajas .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  flex-wrap: wrap;
}
/* ===============================
   DS24 · Doble banner (2 columnas)
   Pegar al FINAL del CSS
   =============================== */

.ds24-duo-banners{
  width: min(1120px, calc(100% - 40px)); /* igual que tu .container final */
  margin: 28px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Tarjeta banner */
.ds24-banner{
  position: relative;
  display: block;
  min-height: 260px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;

  /* si quieres recto: deja 0. Si quieres suave, pon 16px */
  border-radius: 0;

  border: 1px solid rgba(0,0,0,.12);
  background-image: var(--bg, none);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  transform: translateZ(0);
}

/* Overlay (esto era lo que tenías cortado) */
.ds24-banner__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.36) 45%,
    rgba(0,0,0,.20) 70%,
    rgba(0,0,0,.42) 100%
  );
}

/* Barra roja marca */
.ds24-banner::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: var(--gamma-red, #CE112D);
  z-index: 2;
}

/* Contenido */
.ds24-banner__content{
  position: relative;
  z-index: 3;
  padding: 18px 18px;
  max-width: 72%;
}

.ds24-banner__kicker{
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
}

.ds24-banner__title{
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ds24-banner__sub{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
}

/* Botón */
.ds24-banner__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #111;
  font-weight: 900;
  padding: 10px 14px;
  text-decoration: none;

  /* recto */
  border-radius: 0;

  border: 1px solid rgba(255,255,255,.85);
}
.ds24-banner__btn::after{
  content:"→";
  color: var(--gamma-red, #CE112D);
  font-weight: 900;
}

/* Zona derecha opcional (para fecha / texto corto) */
.ds24-banner__side{
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 3;
  text-align: right;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .ds24-duo-banners{ grid-template-columns: 1fr; }
  .ds24-banner__content{ max-width: 92%; }
  .ds24-banner__side{ position: static; padding: 0 18px 14px; text-align: left; }
}

@media (max-width: 520px){
  .ds24-duo-banners{ width: calc(100% - 28px); }
  .ds24-banner{ min-height: 240px; }
  .ds24-banner__title{ font-size: 24px; }
}
/* ===== Botón MOVES en el menú ===== */
.nav{
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-cta{
  margin-left: auto;              /* empuja a la derecha */
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.nav-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.10);
}

@media (max-width: 820px){
  .nav{ flex-wrap: wrap; }
  .nav-cta{
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}
/* ===== MODAL MOVES III ===== */
.ds24-modal--wide{
  max-width: 900px;
}

.moves-content{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.moves-logos{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.moves-logos img{
  max-height: 48px;
  object-fit: contain;
}

.moves-text{
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.moves-text strong{
  font-weight: 700;
}

.moves-note{
  margin-top: 10px;
  font-size: 13px;
  color: #666;
}

.moves-actions{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
/* ===== MOVES MODAL FIX VISUAL ===== */

.ds24-modal--wide{
  max-width: 880px;
}

.moves-content{
  padding: 10px 4px 0;
}

.moves-logos-text{
  font-size: 13px;
  text-align: center;
  color: #555;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;
  margin-bottom: 18px;
}

.moves-text{
  font-size: 15px;
  line-height: 1.7;
  color: #222;
}

.moves-text strong{
  font-weight: 700;
}

.moves-note{
  margin-top: 14px;
  font-size: 13px;
  color: #666;
}

.moves-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
/* ===== MODAL MOVES (oficial + limpio) ===== */
.modal{ display:none; position:fixed; inset:0; z-index:9999; }
.modal.is-open{ display:block; }

.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}

.modal-card{
  position:relative;
  width:min(980px, calc(100% - 24px));
  margin: 6vh auto;
  background:#fff;
  border-radius:16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: 18px 18px 16px;
}

.modal-x{
  position:absolute; top:10px; right:12px;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.modal-title{
  margin: 6px 42px 12px 0;
  font-size: 22px;
  line-height: 1.2;
}

.moves-logos{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  align-items:center;
  padding: 10px 12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fafafa;
}

.moves-logos img{
  height: 4px;          /* clave: todos a misma altura */
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display:block;
}

.modal-body{ padding: 12px 2px 6px; }

.moves-text{
  margin: 8px 0 10px;
  font-size: 16px;
  line-height: 1.55;
}

.moves-note{
  margin: 0;
  font-size: 14px;
  opacity: .85;
}

.modal-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  padding-top: 12px;
}

body.modal-open{ overflow:hidden; }

/* Responsive */
@media (max-width: 240px){
  .modal-card{ margin: 3vh auto; padding: 14px; }
  .modal-title{ font-size: 18px; }
  .moves-logos img{ height: 28px; max-width: 160px; }
  .modal-actions{ flex-direction:column; }
}
:root{
  --gamma-red: #d71920; /* ajusta si ya usas otro rojo */
}

/* Enlace destacado MOVES en el nav */
.nav a.nav-moves{
  color: var(--gamma-red);
  font-weight: 800;
  border: 1px solid rgba(215,25,32,.55);
  background: rgba(215,25,32,.06);
  padding: 8px 12px;
  border-radius: 999px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(215,25,32,.10);
}

/* Iconito antes (opcional pero ayuda a “visibilidad”) */
.nav a.nav-moves::before{
  content: "●";
  font-size: 10px;
  line-height: 1;
}

/* Hover */
.nav a.nav-moves:hover{
  background: rgba(215,25,32,.10);
  filter: brightness(.99);
}

/* Si tu nav usa .active, que MOVES active también quede claro */
.nav a.nav-moves.active,
.nav a.nav-moves[aria-current="page"]{
  background: var(--gamma-red);
  color: #fff;
  border-color: var(--gamma-red);
}

/* En móvil: que no se pierda y tenga buen tamaño */
@media (max-width: 900px){
  .nav a.nav-moves{
    padding: 9px 12px;
    font-weight: 900;
  }
}

:root{
  --gamma-red:#d71920;
  --card-border: rgba(215, 25, 32, .55);
}

:root{
  --gamma-red:#d71920;
  --card-border: rgba(215, 25, 32, .55);
}

:root{
  --gamma-red:#d71920;
}

/* NOTICIAS & ARTÍCULOS */
.ds24-news{ padding:34px 0; }
.ds24-news__head{ text-align:center; margin-bottom:18px; }
.ds24-news__title{
  margin:0 0 8px;
  letter-spacing:.06em;
  font-weight:900;
}
.ds24-news__sub{ margin:0; opacity:.75; line-height:1.6; }

.ds24-news__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:stretch;
}

/* Tarjeta */
.ds24-post{
  background:#fff;
  border:1px solid rgba(215,25,32,.75); /* borde rojo */
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  border-radius:0; /* estilo “card artículo” más recto */
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.ds24-post__media{ position:relative; display:block; background:#f3f3f3; }
.ds24-post__media img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}

.ds24-post__badge{
  position:absolute;
  left:14px;
  bottom:14px;
  background:var(--gamma-red);
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}

.ds24-post__body{
  padding:18px 18px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.ds24-post__h3{ margin:0; font-size:22px; line-height:1.2; font-weight:900; }
.ds24-post__h3 a{ color:var(--gamma-red); text-decoration:none; }
.ds24-post__h3 a:hover{ text-decoration:underline; }

.ds24-post__meta{ font-weight:800; font-size:13px; opacity:.78; }

.ds24-post__excerpt{ margin:0; line-height:1.7; opacity:.92; }
.ds24-post__excerpt strong{ color:var(--gamma-red); }

.ds24-post__footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:8px;
}

.ds24-post__cta{ font-weight:900; color:var(--gamma-red); }
.ds24-post__arrow{ font-size:22px; font-weight:900; color:#111; }

.ds24-post:hover{
  transform:translateY(-2px);
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 18px 34px rgba(0,0,0,.12);
}

/* Responsive */
@media (max-width:1020px){
  .ds24-news__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .ds24-news__grid{ grid-template-columns:1fr; }
  .ds24-post__media img{ height:210px; }
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

.contact-photo {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}