@charset "utf-8";
/* CSS Document */

:root{
  --c-cream:#EBDFC9;
  --c-teal:#26566A;
  --c-cream-2:#E1D3B8;
  --c-sage:#BDC4B4;        /*  color de la sección siguiente */
  --c-dark:#0e1820;
  --container:1120px;
  --intro-bg: var(--c-sage); /*  para el fade inferior del hero */
}

html,body{height:100%;}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:#222;
  background:var(--c-cream);
  line-height:1.45;
}
a{color:inherit; text-decoration:none;}
.container{width:min(100% - 2rem,var(--container));margin-inline:auto;}

/* ================= TOPBAR ================= */
.topbar{
  position:fixed; inset:0 0 auto 0; height:56px; z-index:50;
  background:rgba(235,223,201,.88);               /* translúcida como en la foto */
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.topbar .container{
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:.6rem; padding-left:.5rem;}
.brand img{height:30px;width:auto;display:block;}
.brand span{font-weight:700; color:#2a4d5d; letter-spacing:.02em}
.links{display:flex;gap:.75rem;padding-right:.5rem;font-size:.95rem;}
.topbar a{
  padding:.45rem .8rem;
  border-radius:999px;
  color:#333;
  background:none;
  box-shadow:none;
  transition:color .2s ease;
}
.topbar a:hover{color:#B5362D;}
/* Hamburguesa: oculta en desktop, aparece en mobile */
.menu-btn{ display:none; font-size:1.15rem; padding:.45rem .8rem; cursor:pointer; }

/* ================= HERO CON CARRUSEL ================= */
.hero{
  position:relative;
  /* Antes: min-height:100vh; */
  min-height:80vh;
  display:grid;
  place-items:end center;
  overflow:hidden;
  color:white;
  text-align:left;
}

/* Fondo carrusel (SIN filtros/velos) */
.carousel{
  position:absolute; inset:0; overflow:hidden; z-index:0;
}
.carousel img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.5s ease-in-out;
  /* Antes:
  filter:none !important;
  mix-blend-mode:normal !important;
  */
  filter: brightness(0.45);
  mix-blend-mode: normal;
}
.carousel img.active{opacity:1;}

/* QUITAMOS cualquier velo/degradé del hero (desktop y mobile) */
.hero::after, .bottom-fade{ display:none !important; }

.hero-inner{
  position:relative; z-index:2; width:100%;
  padding:10rem 0 8rem;                       /* desktop */
  padding-left:7rem;
}

.brand-line{
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:2rem; width:100%; max-width:980px;
}
.brand-kicker{
   color:#E1D3B8;
  font-weight:700;
  letter-spacing:.06em;
  font-size:2rem;
 
}
.blancochico{color:white; font-size:.8rem; font-weight:400; margin-left:295px; text-align:right;}

.title{
  font-size:clamp(4rem,8vw + 1rem,9rem);
  line-height:.9;
  margin:.25rem 0 .5rem;
  font-weight:800;
  /* Antes: color:var(--c-teal); + mix-blend + text-shadow */
  color: var(--c-cream);
  mix-blend-mode: normal;
  text-shadow: none;
}

.subtitle{
  font-size:clamp(1.2rem,1.8vw + .6rem,1.8rem);
  font-weight:700;
  letter-spacing:.02em;
  /* Antes: color teal + glow */
  color: var(--c-cream);
  background:none;
  display:inline-block;
  padding:0;
  text-shadow: none;
}

/* ===== Coloreos de secciones ===== */
#quienes { color: #E1D3B8!important; }
#quienes p { color: #E1D3B8!important; }
#quienes strong { color: #E1D3B8!important; }

.titcuadroservicios1 { color: #EBDFC9!important; font-size: 1.2rem!important; font-weight: 400!important; }
.textocuadroservicios1 {
  color: #EBDFC9 !important;
  font-size: 0.9rem !important;
  font-weight: 200 !important;
  letter-spacing: 0.03em!important;
  margin-top: -13px!important;
}

.titcuadroservicios2 { color: #26566A!important; font-size: 1.2rem!important; font-weight: 400!important; }
.textocuadroservicios2 {
  color: #26566A !important;
  font-size: 0.9rem !important;
  font-weight: 200 !important;
  letter-spacing: 0.03em!important;
}

/* Botón principal (por si lo usás en el hero) */
.cta-wrap{
  position:absolute; right:260px; bottom:29px;
  display:flex; gap:.75rem; align-items:center;
}
.btn{
  appearance:none; border:0; cursor:pointer; font-weight:600;
  padding:.65rem 1rem; border-radius:999px;
  background:var(--c-teal); color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.btn:hover{filter:brightness(1.07);}

/* ================= WhatsApp fijo ================= */
.whatsapp-fixed{
  position:fixed; bottom:25px; right:25px; z-index:1000;
  background:var(--c-teal); color:#fff;
  padding:.8rem 1.4rem; border-radius:999px;
  font-weight:600; display:flex; align-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .2s ease, filter .2s ease;
}
.whatsapp-fixed i{margin-right:6px;}
.whatsapp-fixed:hover{ transform:scale(1.05); filter:brightness(1.1); }

/* ================= Intro ================= */
.intro{background:var(--intro-bg)!important; padding:2rem 0 1.5rem;}
.center{text-align:center;}
.lead{
  font-size: clamp(1.2rem, .9rem + .8vw, 1.15rem);
  max-width: 880px;
  margin: 0.6rem auto;
  letter-spacing: -0.025em;
  line-height: 1.35;
}
.lead b { color: var(--c-teal); }
.lead em { color: #b23d2b; font-style: normal; font-weight: 700; }
.lead .accent { color: #b23d2b; font-weight: 600; }

.more .btn{ background:#26566A; padding-left:35px; padding-right:35px; font-size:0.9rem; }
.separotop{ line-height: 70px;}

/* Botón sección Quienes */
.boton-quienes{
  background-color:#E3D8C2!important; color:#1C1C1C;
  font-family:'Inter',sans-serif; font-size:0.9rem; font-weight:500;
  text-decoration:none; padding:0.25rem 2.5rem; border:none;
  border-radius:50px; display:inline-block;
  transition:all 0.3s ease; margin-bottom:22px!important;
}
.boton-quienes:hover{background-color:#BDC4B4!important;}

/* ================= STATS ================= */
.stats{
  background:var(--c-cream-2);
  padding:3.5rem 0 3rem;
  border-top:1px solid rgba(0,0,0,.06);
}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;}
.stat{
  background:#f7f2e7; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; padding:1.4rem; min-height:230px;
}
.percent{
  font-weight:600;
  font-size:clamp(4rem,7vw + 1rem,7rem);
  line-height:1; color:var(--c-teal);
  text-align:center; display:flex; justify-content:center; align-items:center;
}
.percent.red{color:#D04D3D}
.desc{
  margin-top: 35px;
  font-size: .8rem;
  color: #26566A;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.rojo { color:#D04D3D!important;}
.subtitulogris { font-size: 2.5rem;}
.note{margin-top:2rem; font-size:.78rem; color:#26566A;}

/* ================= QUIÉNES SOMOS ================= */
.band{background:var(--c-teal); color:#eaf2f4; padding:3.8rem 0;}
.band h3{font-size:clamp(2rem,3.6vw,3.2rem); margin:0 0 1rem;}
.band p{max-width:900px; color:#e7efe9;}
.band strong{color:#fff;}

/* ================= FOOTER ================= */
footer{background:var(--c-dark); color:#FCF0D9; padding:3rem 0 2rem;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr; gap:2rem;}
.mark{font-size:5.25rem; font-weight:500; color:#E1D3B8;}
.hr{height:1px; background:rgba(255,255,255,.12); margin:2rem 0;}
.copyright{font-size:.8rem; color:#9eb0b6;}
.foot-gridfondo{background-color:#292929!important;}
.textosfooter { font-size: 0.9rem;}

#ubicodatos { margin-top: 100px; margin-left: 55px; font-size: 0.8rem; line-height: 30px;}
#ubicodatos .titulocontacto { font-size: 1rem; font-weight: 400; line-height: 10px;}
#ubicodatos a { }
#ubicodatos a:hover { color:#9eb0b6;}

html { scroll-behavior: smooth; }

/* ================= SERVICIOS ================= */
.svc-hero{
  padding: 7.5rem 0 4rem;
  background:
    linear-gradient(to bottom, rgba(235,223,201,0.85) 0%, rgba(235,223,201,0.55) 40%, rgba(189,196,180,0.35) 78%, var(--c-sage) 100%);
}
.svc-hero b { color: var(--c-teal)!important; }

.svc-title{
  margin: 0 0 .6rem 0;
  font-weight: 700;
  color: var(--c-teal);
  font-size: clamp(2.6rem, 5.8vw, 4.2rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.svc-kicker{
  margin: 0 0 1.2rem 0;
  font-size: clamp(1rem, 1.1vw + .5rem, 1.25rem);
  color: #2a4d5d;
}
.svc-lead{
  max-width: 760px;
  margin: .25rem 0 2rem 0;
  font-size: clamp(1rem, .7rem + .7vw, 1.05rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #2b2b2b;
}
.svc-lead b{ color: var(--c-teal); }
.svc-leadopacidad { color: rgba(43, 43, 43, 0.7); }

.svc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.2rem;
}

/* Tarjetas + efecto “se estira” */
.svc-card{
  position: relative;
  display: grid; place-items: center; text-align: center;
  min-height: 120px; padding: 1.2rem 1rem;
  background: #1f3f4b; color: #fff; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.svc-card:hover{ transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 10px 24px rgba(0,0,0,.14); }

.svc-card::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:10px;
  background:#26566A; transition:height .35s ease; z-index:0;
}
.svc-card:hover::before, .svc-card:focus-visible::before{ height:100%; }

.svc-label, .svc-details{ position:relative; z-index:1; }
.svc-label{ transition:transform .25s ease, opacity .25s ease; }

.svc-details{
  opacity:0; max-height:0; overflow:hidden; transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease, max-height .28s ease;
  padding-top:.6rem;
}
.svc-card:hover .svc-details, .svc-card:focus-visible .svc-details{
  opacity:1; transform: translateY(0); max-height:420px;
}
.svc-card:hover .svc-label, .svc-card:focus-visible .svc-label{ transform: translateY(-2px); }

.svc-details ul{
  margin:.25rem 0 0 1.1rem; padding:0; list-style: disc;
  color:#FCF0D9; text-align:left; font-weight:200; letter-spacing:.01em;
}
.svc-details li{ margin:.15rem 0; line-height:1.35; font-size: clamp(.78rem, .62rem + .35vw, .92rem); }
.svc-card:focus-visible{ outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }

/* ================= WORKFLOW ================= */
.work-band {
  padding: 3.2rem 0 4rem;
  background: linear-gradient(
    to bottom,
    var(--c-sage) 0%,
    rgba(189,196,180,0.85) 25%,
    rgba(235,223,201,0.65) 65%,
    var(--c-cream) 100%
  );
}
.work-title {
  margin: 0 0 2rem 0;
  font-weight: 800;
  color: var(--c-teal);
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  text-decoration: none;
  text-decoration-thickness: .14rem;
  text-underline-offset: .25rem;
}
.work-subtitulo { text-decoration: underline; }

.work-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.work-steps::before {
  content: ""; position: absolute; left: 3rem; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, rgba(38,86,106,.4), rgba(38,86,106,.15));
}
.work-step {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start;
  padding: 1rem 0 1.8rem 0; position: relative;
}
.work-num {
  font-weight: 800; color: var(--c-teal);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  text-align: center; position: relative; line-height: 1;
}
.work-num::after {
  content: ""; position: absolute; left: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%);
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(38,86,106,.18); z-index: 2;
}
.work-body h3 {
  margin: 0 0 .25rem 0; font-weight: 800; color: var(--c-teal);
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
}
.work-body p {
  margin: 0 0 1rem 0; max-width: 860px; color: #2b2b2b;
  font-size: clamp(.95rem, .65rem + .6vw, 1rem); line-height: 1.45;
}
.work-body b { color: var(--c-teal); }

.separoruntoque {  margin-left: 25px; }

/* ================= POR QUÉ ELEGIRNOS ================= */
.why-band{ padding:3.2rem 0 4rem; background-color:#bdc4b4; }
.why-title{ margin:0 0 2rem 0; font-weight:800; color:var(--c-teal); font-size:clamp(1.8rem,3.8vw,2.6rem); text-align:left; }

/* Dos columnas de igual altura */
.why-wrapper{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:stretch !important; /* ambas columnas igual de altas */
}
.why-left, .why-right{
  display:flex;
  flex-direction:column;
  gap:1rem; width: 95%;
}

/* Tarjetas con altura fija y swap de contenido sin “estirarse” */
.why-card,
.why-card2{
  position:relative;
  width:100%;
  padding:1.4rem 1.2rem;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
  text-align:center;
  height:66px !important;        /* altura fija */
  min-height:66px !important;
  overflow:hidden;
}

/* Fondos originales (sin tocar estética) */
.why-card{
  background-image:url('../images/fondo_rosa_vintage.jpg') !important;
}
.why-card2{
  background-image:url('../images/fondo_azul_vintage.jpg') !important;
}

/* Mantengo tus variantes y clases de tipografía */
.alta{ height:130px !important; } /* ya coincide con la fija */
.unpuntomas{ font-size:1.2rem; margin-top:-15px; }
.why-card.dark{ background:#26566A; color:#fff; }
.why-card.light{ background:var(--c-cream-2); color:#2b2b2b; }
.why-card h3{ margin:0 0 .35rem 0; font-weight:800; color:currentColor; font-size:clamp(1.05rem,2.1vw,1.25rem); letter-spacing:.01em; }
.why-card p{ margin:0; font-size:clamp(.9rem,.62rem + .55vw,1rem); line-height:1.4; letter-spacing:-0.01em; }
.why-card2 h3{ margin:0 0 .35rem 0; font-weight:800; color:currentColor; font-size:clamp(1.05rem,2.1vw,1.25rem); letter-spacing:.01em; }
.why-card2 p{ margin:0; font-size:clamp(.9rem,.62rem + .55vw,1rem); line-height:1.4; letter-spacing:-0.01em; }

/* --- Swap título ↔ bajada sin afectar el alto --- */
.why-card h3, .why-card2 h3,
.why-card p,  .why-card2 p{
  position:absolute;
  left:0; right:0; top:50%;
  transform:translateY(-50%);
  margin:0;
  padding:0 .5rem;
}

/* Estado inicial: solo título visible */
.why-card h3, .why-card2 h3{ opacity:1; transition:opacity .22s ease; }
.why-card p,  .why-card2 p  { opacity:0; transition:opacity .22s ease; }

/* Hover/Focus: oculto título, muestro bajada (sin mover nada) */
.why-card:hover h3, .why-card:focus-visible h3,
.why-card2:hover h3, .why-card2:focus-visible h3{ opacity:0; }
.why-card:hover p,  .why-card:focus-visible p,
.why-card2:hover p, .why-card2:focus-visible p{ opacity:1; }

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce){
  .why-card h3, .why-card2 h3,
  .why-card p,  .why-card2 p{ transition:none; }
}

/* ================= CONTACTO ================= */
.contact-band{
  padding: 2.2rem 0 3rem;
  background: linear-gradient(to bottom,
              rgba(235,223,201,.85) 0%,
              rgba(235,223,201,.55) 35%,
              rgba(189,196,180,.35) 80%,
              var(--c-sage) 100%);
}
.contact-grid{
  display:grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items:start;
}
.contact-form{ width:100%; }
.contact-form .row-2{
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 1.3rem; row-gap: 1.1rem; margin-bottom: 1.1rem;
}
.field{
  width: 100%; border: 1px solid rgba(0,0,0,.08);
  background-color: #FBF0DD; color: #2b2b2b;
  padding: .95rem 1rem; border-radius: 0;
  outline: none; font: 400 0.95rem Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  margin-bottom: 1.1rem;
}
.field::placeholder{ color: rgba(0,0,0,.45); }
.field:focus{ border-color: rgba(38,86,106,.30); box-shadow: none; background-color: #FFF6E8; }

.textarea{ resize: vertical; min-height: 180px; margin-bottom: 0; }
.formulario{ display: flex; flex-direction: column; gap: 1rem; }
.form-row{ display: flex; gap: 1rem; }
input, textarea{
  width: 100%; padding: 1.1rem 1rem; border: none;
  background: #FCF0D9; font-family: inherit; font-size: 0.8rem; box-sizing: border-box;
}
textarea{ resize: vertical; min-height: 180px; }

/* BOTÓN ENVIAR FORMULARIO */
.btn-enviar{
  display: inline-block; background-color: #B5362D; color:#fff; border:none;
  padding: 0.9rem 2rem; font-size: 0.9rem; font-weight: 600; text-align:center; cursor:pointer;
  transition: background-color .25s ease, transform .15s ease; width:45%;
}
.btn-enviar:hover{ background-color:#B5362D; transform: translateY(-1px); }
.btn-enviar:active{ transform: translateY(0); }

/* Datos / íconos */
.contact-info{ margin-top: .25rem; }
.info-list{ list-style:none; margin:.75rem 0 0 0; padding:0; display:grid; gap:.85rem; color:#1c1c1c; }
.info-list li{ display:flex; align-items:center; gap:.8rem; font-size: .95rem; }
.info-list a:hover{ color:#9eb0b6; }
.ico{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background: rgba(38,86,106,.10); color: var(--c-teal); flex:0 0 32px;
}

/* ================= LOGOS ================= */
.logos-carousel{ position: relative; margin-top: 1rem; }
.logos-track{
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding: 0.5rem 3rem; scrollbar-width: none;
}
.logos-track::-webkit-scrollbar{ display:none; }
.logo-card{
  flex: 0 0 230px !important; height: 170px !important;
  background: transparent !important; border:none !important; box-shadow:none !important; padding:0 !important;
}
.logo-card img{
  max-width:100% !important; max-height:100% !important; object-fit:contain !important;
  filter:none !important; opacity:1 !important; transform:none !important; transition:none !important;
}
.logo-card.group{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.grid4{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:.6rem !important; width:100% !important; height:100% !important; place-items:center !important; }
.grid4 img{ max-width:100% !important; max-height:100% !important; filter:none !important; opacity:1 !important; }

/* Flechas del carrusel de logos */
.logos-carousel { position: relative; }

.logos-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  cursor: pointer;
  color: var(--c-teal);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.logos-nav:hover { background: rgba(255,255,255,0.85); }
.logos-nav.prev { left: 6px; }
.logos-nav.next { right: 6px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 960px){

  /* Topbar + hamburguesa */
  .topbar{ background: rgba(235,223,201,.92) !important; }
  .links{ display:none !important; }
  .menu-btn{ display:block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 .25rem !important;
    line-height: 1 !important;
    color: var(--c-teal) !important;
  }

  /* Hero sin degradé, texto bien arriba-izquierda */
  .hero{
    min-height: 100svh;
    place-items: start center !important;
  }
  .hero-inner{
    padding: 11.25rem 1.1rem 11.5rem !important;
  }
  .brand-line{ flex-direction: column; gap:.35rem; }
  .blancochico{ margin-left:0; text-align:left; }

  .subtitle{
    display:block; font-size: clamp(1rem, 2.6vw, 1.15rem);
     color:#E1D3B8;
    background:none !important; padding:0 !important;

   
  }
  .title{
    font-size: clamp(3.4rem, 12vw, 6rem) !important;
    color:#E1D3B8;
    mix-blend-mode: normal !important;
    line-height:.95;
 
  }
  .brand-kicker{ font-size: clamp(1.05rem, 3.4vw, 1.35rem);  color:#E1D3B8; }

  /* CTA */
  .cta-wrap{ position:static !important; padding-top:.75rem; gap:.6rem; }
  .btn{ padding:.6rem .95rem; font-size:.95rem; }

  /* WhatsApp solo ícono, redondo */
  .whatsapp-fixed{
    width:52px; height:52px; padding:0 !important; border-radius:50% !important;
    display:grid; place-items:center; font-size:0 !important;
    right:max(14px, env(safe-area-inset-right) + 10px) !important;
    bottom:max(14px, env(safe-area-inset-bottom) + 10px) !important;
  }
  .whatsapp-fixed i{ margin:10px!important; font-size:22px !important; }

  /* Stats */
  .grid3{ grid-template-columns:1fr; gap:1rem; }
  .desc{ font-size:.85rem; letter-spacing:-0.01em; line-height:1.35; }

  /* Servicios */
  .svc-hero{ padding: 5.5rem 0 3rem; }
  .svc-title{ font-size: clamp(2rem, 7vw, 2.8rem); }
  .svc-kicker{ font-size: clamp(.95rem, 2.8vw, 1.05rem); }
  .svc-lead{ font-size: clamp(.95rem, 2.8vw, 1.05rem); }
  .svc-grid{ grid-template-columns: 1fr; }
  .svc-card{ min-height: 100px; }

  /* Workflow */
  .work-steps { padding-left: 2rem; }
  .work-steps::before { left: .6rem; }
  .work-step { grid-template-columns: 2rem 1fr; gap: .8rem; }
  .work-num{ font-size: clamp(1.1rem, 3.2vw, 1.3rem); }
  .work-num::after{ width: .45rem; height: .45rem; }
  .work-body h3{ font-size: clamp(1rem, 3vw, 1.15rem); }
  .work-body p{ font-size: clamp(.92rem, 2.8vw, 1rem); line-height: 1.42; }

  /* Why */
  .why-wrapper{ display:block; }
  .why-left, .why-right{ width:85%; margin-top:15px!important; margin-left: 0px!important; }
  .why-card h3{ font-size: clamp(1rem, 3vw, 1.15rem); }
  .why-card p{ font-size: clamp(.9rem, 2.8vw, .98rem); }

  /* Contacto */
  .contact-grid{ grid-template-columns:1fr; gap:1.25rem; }
  .contact-form .row-2{ grid-template-columns:1fr; row-gap:1rem; }
  .field{ padding:1rem; font-size:.95rem; }
  .textarea{ min-height:160px; }
  .btn-enviar{ width:100%; padding:1rem 1.25rem; font-size:1rem; }

  /* Logos */
  .logo-card{ flex-basis: clamp(140px, 44vw, 220px); }
  .logos-nav{ display:none; }

  /* Menu abierto en mobile */
  .topbar.is-open .links{
    display:flex !important;
    position:absolute;
    top:56px;
    left:0; right:0;
    flex-direction:column;
    gap:0;
    background: rgba(235,223,201,.98);
    backdrop-filter: blur(6px);
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:.5rem .75rem .75rem;
    z-index:60;
  }
  .topbar.is-open .links a{
    padding:.8rem 1rem;
    border-radius:.6rem;
  }
  .topbar.is-open .menu-btn i::before{
    content:"\f00d"; /* fa-xmark */
    font-family:"Font Awesome 6 Free";
    font-weight:900;
  }

  .mark { font-size: clamp(3rem, 10vw, 3.8rem) !important; }

  /* ===== Footer responsive fix ===== */
  .foot-grid{
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    align-items: start !important;
  }
  .foot-grid > div:first-child{ order: 1; }
  #ubicodatos{
    order: 2;
    margin: 1rem 0 0 0 !important;
    font-size: .95rem !important;
    line-height: 1.6 !important;
    margin-left: 0 !important;
  }
  #ubicodatos .titulocontacto{
    margin: 0 0 .6rem 0 !important;
    line-height: 1.2 !important;
  }
  .textosfooter{ max-width: 46ch; }

  .why-wrapper{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .why-left, .why-right{
    width: 90% !important;
    margin: 0 !important;
  }
}

@media (max-width: 480px){
  .hero{
    min-height: 100svh;
    place-items: start center !important;
  }
  .hero-inner{  padding: 11.25rem 1.1rem 11.5rem !important; }

  .title{
    font-size: clamp(2.4rem, 12vw, 4rem) !important;
     color:#E1D3B8;
    mix-blend-mode: normal !important;
 
  }
  .subtitle{
    font-size: clamp(.95rem, 3.2vw, 1.1rem) !important;
    color:#E1D3B8;
 
  }

  .mark { font-size: clamp(3rem, 10vw, 3.8rem) !important; }

  /* ===== Footer responsive fix ===== */
  .foot-grid{
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    align-items: start !important;
  }
  .foot-grid > div:first-child{ order: 1; }
  #ubicodatos{
    order: 2;
    margin: 1rem 0 0 0 !important;
    font-size: .95rem !important;
    line-height: 1.6 !important;
    margin-left: 0 !important;
  }
  #ubicodatos .titulocontacto{
    margin: 0 0 .6rem 0 !important;
    line-height: 1.2 !important;
  }
  .textosfooter{ max-width: 46ch; }

  /* WhatsApp solo ícono, redondo */
  .whatsapp-fixed{
    width:52px; height:52px; padding:0 !important; border-radius:50% !important;
    display:grid; place-items:center; font-size:0 !important;
    right:max(14px, env(safe-area-inset-right) + 10px) !important;
    bottom:max(14px, env(safe-area-inset-bottom) + 10px) !important;
  }
  .whatsapp-fixed i{ margin:10px!important; font-size:22px !important; }

  /* Why */
  .why-wrapper{ display:block; }
  .why-left, .why-right{ width:85%; margin-top:15px!important; margin-left: 0px!important; }
  .why-card h3{ font-size: clamp(1rem, 3vw, 1.15rem); }
  .why-card p{ font-size: clamp(.9rem, 2.8vw, .98rem); }

  .why-wrapper{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }
  .why-left, .why-right{
    width: 90% !important;
    margin: 0 !important;
  }
}