/* =========================================================
   EL FOGÓN DE ELVIA. Landing B2B (Pasto, Nariño)
   Paleta oficial del manual de marca:
   Café oscuro  #601510   (Pantone 33°  | CMYK 36/99/90/57)
   Mostaza      #f6a028   (Pantone 2°   | CMYK 0/44/89/0)
   Tipografías: Changa (textos) · Lilita One (sustituto web de Retroking)
   ========================================================= */

:root{
  --marron:#601510;
  --marron-900:#3d0d09;
  --marron-700:#7a1f18;
  --mostaza:#f6a028;
  --mostaza-600:#e08a13;
  --mostaza-100:#fdf0dc;
  --crema:#fbf6f0;
  --crema-2:#f5e9dd;
  --terracota:#d9906d;
  --texto:#2b1512;
  --texto-2:#6b5450;
  --blanco:#ffffff;
  --wa:#25D366;
  --wa-dark:#128C7E;
  --radio:16px;
  --radio-lg:26px;
  --sombra:0 10px 30px rgba(96,21,16,.10);
  --sombra-lg:0 26px 60px rgba(96,21,16,.20);
  --max:1180px;
  --display:"Retroking", "Lilita One", "Changa", system-ui, sans-serif;
  --h1-color:#60130F;
  --texto-font:"Changa", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth; scroll-padding-top:100px;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
body{
  margin:0; background:var(--crema); color:var(--texto);
  font-family:var(--texto-font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
  -webkit-tap-highlight-color:rgba(246,160,40,.28);
}
/* Sin retardo de 300 ms al tocar en móvil */
a,button,input,select,textarea,summary,label{touch-action:manipulation}
img{max-width:100%; height:auto; display:block}
a{color:var(--marron); text-decoration:none}
h1,h2,h3{margin:0 0 .5em; line-height:1.15; color:var(--marron)}
h1{font-family:var(--display); font-size:clamp(2.1rem,4.6vw,3.6rem); font-weight:400; letter-spacing:.2px; color:var(--h1-color)}
h1 em{font-style:normal; color:var(--mostaza-600); display:block}
h2{font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,3.2vw,2.5rem)}
h3{font-weight:700; font-size:1.18rem}
p{margin:0 0 1rem}
ul{margin:0; padding:0; list-style:none}

.wrap{width:min(100% - 2.4rem, var(--max)); margin-inline:auto}
.wrap--narrow{width:min(100% - 2.4rem, 840px)}
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section--alt{background:var(--crema-2)}
.section__head{text-align:center; max-width:760px; margin:0 auto 3rem}
.section__sub{color:var(--texto-2); font-size:1.05rem}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:1rem; top:1rem; background:#fff; padding:.6rem 1rem; z-index:999; border-radius:8px}

.eyebrow{
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  color:var(--mostaza-600); margin:0 0 .6rem;
}
.eyebrow--light{color:var(--mostaza)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--texto-font); font-weight:700; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-align:center;
}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn--lg{padding:1.05rem 2rem; font-size:1.08rem}
.btn--sm{padding:.6rem 1.1rem; font-size:.93rem}
.btn--block{width:100%}
.btn--wa{background:var(--wa); color:#06301c; box-shadow:0 10px 26px rgba(37,211,102,.35)}
@media (hover:hover){.btn--wa:hover{background:#1fbe5b}}
.btn--dark{background:var(--marron); color:#fff; box-shadow:0 10px 26px rgba(61,13,9,.35)}
@media (hover:hover){.btn--dark:hover{background:var(--marron-900)}}
.btn--ghost{background:transparent; color:var(--marron); border-color:var(--marron)}
@media (hover:hover){.btn--ghost:hover{background:var(--marron); color:#fff}}
.btn--outline{background:#fff; color:var(--marron); border-color:var(--mostaza)}
@media (hover:hover){.btn--outline:hover{background:var(--mostaza); color:var(--marron-900)}}

/* Icono WhatsApp (SVG inline como máscara, sin peticiones externas) */
.ico-wa{
  width:20px; height:20px; flex:0 0 20px; background:currentColor;
  -webkit-mask:var(--wa-mask) center/contain no-repeat; mask:var(--wa-mask) center/contain no-repeat;
  --wa-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96s-.47-.15-.67.15-.77.96-.94 1.16-.35.22-.64.08a8.2 8.2 0 0 1-2.4-1.48 9 9 0 0 1-1.67-2.06c-.17-.3 0-.46.13-.6s.3-.35.45-.52.2-.3.3-.5a.55.55 0 0 0 0-.52c-.08-.15-.67-1.6-.92-2.2s-.49-.5-.67-.51h-.57a1.1 1.1 0 0 0-.8.37 3.34 3.34 0 0 0-1.04 2.48 5.8 5.8 0 0 0 1.22 3.08 13.3 13.3 0 0 0 5.1 4.5c.71.3 1.27.49 1.7.63a4.1 4.1 0 0 0 1.88.12 3.07 3.07 0 0 0 2-1.42 2.5 2.5 0 0 0 .17-1.41c-.07-.13-.27-.2-.57-.35zM12.04 21.5h-.01a9.5 9.5 0 0 1-4.83-1.32l-.35-.2-3.59.94.96-3.5-.23-.36a9.4 9.4 0 0 1-1.44-5.02 9.5 9.5 0 1 1 9.5 9.46zM12.05 2A11.5 11.5 0 0 0 2.07 19.2L1 23.3l4.2-1.1A11.5 11.5 0 1 0 12.05 2z'/%3E%3C/svg%3E");
}
.ico-wa--lg{width:26px; height:26px; flex-basis:26px}
.ico-tel{
  width:18px; height:18px; flex:0 0 18px; background:currentColor;
  -webkit-mask:var(--tel-mask) center/contain no-repeat; mask:var(--tel-mask) center/contain no-repeat;
  --tel-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.4 11.4 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* Botón de llamada: solo aparece en móvil, donde llamar es lo más rápido */
.btn--tel{display:none; background:var(--marron); color:#fff; box-shadow:0 8px 20px rgba(61,13,9,.3)}
@media (hover:hover){.btn--tel:hover{background:var(--marron-900)}}

/* ---------- Header ---------- */
.header{position:sticky; top:0; z-index:100; background:rgba(251,246,240,.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(96,21,16,.10)}
.header__in{display:flex; align-items:center; gap:1.2rem; padding:.75rem 0}
.brand img{height:88px; width:auto; display:block}
.nav{display:flex; gap:1.3rem; margin-left:auto; font-weight:600; font-size:.97rem}
.nav a{color:var(--marron); padding:.3rem 0; border-bottom:2px solid transparent}
@media (hover:hover){.nav a:hover{border-color:var(--mostaza)}}
.header__cta{display:flex; align-items:center; gap:.6rem}
.burger{display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:0; width:48px; height:48px; padding:0; cursor:pointer; flex:0 0 48px}
.burger span{width:24px; height:2.5px; background:var(--marron); border-radius:2px; transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5.5rem)}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1000px 520px at 12% -10%, rgba(246,160,40,.30), transparent 62%),
    radial-gradient(760px 460px at 96% 8%, rgba(217,144,109,.30), transparent 60%),
    linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:url("../img/patron.png") repeat; background-size:230px; opacity:.05;
}
.hero__in{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.lead{font-family:var(--texto-font); font-size:1.18rem; font-weight:500; color:var(--texto-2); max-width:54ch; line-height:1.55}
.hero__bullets{margin:1.5rem 0 2rem; display:grid; gap:.7rem; max-width:54ch}
.hero__bullets li{position:relative; padding-left:1.6rem; color:var(--texto); font-weight:500; line-height:1.5}
.hero__bullets li::before{content:''; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--mostaza)}
.hero__actions{display:flex; gap:.9rem; flex-wrap:wrap}

.hero__media{position:relative}
.shot{position:relative; margin:0; border-radius:var(--radio-lg); overflow:hidden; box-shadow:var(--sombra-lg); background:linear-gradient(135deg,var(--mostaza),var(--terracota))}
.shot--main{
  overflow:visible; border-radius:var(--radio-lg);
  background:#141414;
  box-shadow:0 0 0 4px rgba(246,160,40,.6), 0 30px 70px rgba(61,13,9,.38);
}
/* Halo cálido detrás de la pieza para que el fondo oscuro no quede como un hueco */
.shot--main::before{
  content:""; position:absolute; inset:-14% -10% -8%;
  background:radial-gradient(60% 55% at 50% 45%, rgba(246,160,40,.55), transparent 70%);
  filter:blur(38px); z-index:-1;
}
.shot--main img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radio-lg)}
.shot--float{position:absolute; left:-8%; bottom:-6%; width:52%; border:6px solid var(--crema); box-shadow:var(--sombra-lg); z-index:2}
.shot--float img{width:100%; aspect-ratio:4/3; object-fit:cover}
.shot--fallback{position:relative; min-height:220px}
.shot--fallback img{display:none}
.shot--fallback::after{
  content:""; position:absolute; inset:0;
  background:url("../img/patron.png") center/150px repeat, linear-gradient(135deg,var(--mostaza),var(--terracota));
  background-blend-mode:soft-light;
}
.badge-float{
  position:absolute; right:-4%; top:8%; background:var(--marron); color:#fff;
  padding:.9rem 1.1rem; border-radius:var(--radio); max-width:190px; box-shadow:var(--sombra-lg);
  border:2px solid var(--mostaza); z-index:2;
}
.badge-float__num{display:block; font-family:var(--display); font-size:1.8rem; color:var(--mostaza); line-height:1}
.badge-float__txt{font-size:.82rem; line-height:1.3; display:block; margin-top:.25rem}

/* ---------- Sectores ---------- */
.sectors{background:var(--marron); color:#f7e9de; padding:2rem 0}
.sectors__title{text-align:center; font-weight:700; color:var(--mostaza); margin-bottom:1rem; letter-spacing:.02em}
.sectors__list{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1rem}
.sectors__list li{background:rgba(255,255,255,.08); border:1px solid rgba(246,160,40,.35); border-radius:999px; padding:.4rem 1rem; font-size:.92rem}

/* ---------- Grids / Cards ---------- */
.grid{display:grid; gap:1.6rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff; border-radius:var(--radio-lg); overflow:hidden; box-shadow:var(--sombra); border:1px solid rgba(96,21,16,.07); display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease}
@media (hover:hover){.card:hover{transform:translateY(-6px); box-shadow:var(--sombra-lg)}
  }
.card__img{aspect-ratio:4/3; overflow:hidden; background:linear-gradient(135deg,var(--mostaza),var(--terracota)); position:relative}
.card__img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}

.card__img.is-fallback img{display:none}
.card__img.is-fallback::after{content:""; position:absolute; inset:0; background:url("../img/patron.png") center/120px repeat; opacity:.35}
.card__body{padding:1.4rem; display:flex; flex-direction:column; flex:1}
.card__body p{font-size:.97rem; color:var(--texto-2); line-height:1.6; margin-bottom:1.2rem}
.ticks{margin:.4rem 0 1.1rem; display:grid; gap:.35rem; font-size:.92rem}
.ticks li{padding-left:1.5rem; position:relative; color:var(--texto)}
.ticks li::before{content:"✔"; position:absolute; left:0; color:var(--mostaza-600); font-weight:700}
.card__link{margin-top:auto; font-weight:700; color:var(--marron); align-self:flex-start;
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 0;
  box-shadow:inset 0 -2px 0 var(--mostaza)}
@media (hover:hover){.card__link:hover{color:var(--mostaza-600)}}

/* ---------- Franja CTA ---------- */
.strip{background:linear-gradient(100deg,var(--mostaza) 0%, var(--mostaza-600) 100%); position:relative; overflow:hidden}
.strip::after{content:""; position:absolute; inset:0; background:url("../img/patron.png") center/180px repeat; opacity:.12}
.strip__in{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding:2.6rem 0}
.strip__title{margin:0 0 .25rem; color:var(--marron-900)}
.strip__sub{margin:0; color:var(--marron); font-weight:600; max-width:60ch}

/* ---------- Fuera de la ciudad ---------- */
.outcity{background:var(--marron); color:#f4e6dc; position:relative; overflow:hidden}
.outcity::before{content:""; position:absolute; inset:0; background:url("../img/patron.png") center/220px repeat; opacity:.06}
.outcity h2{color:#fff}
.outcity__in{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.outcity p{color:#e8d3c7}
.steps-mini{margin:1.8rem 0 2rem; gap:1.1rem}
.mini{display:flex; gap:.8rem; align-items:flex-start}
.mini span{flex:0 0 34px; height:34px; border-radius:50%; background:var(--mostaza); color:var(--marron-900); font-family:var(--display); display:grid; place-items:center}
.mini p{margin:0; font-size:.95rem}
.mini strong{color:#fff}
.outcity__media{margin:0; border-radius:var(--radio-lg); overflow:hidden; box-shadow:var(--sombra-lg); background:linear-gradient(135deg,var(--mostaza),var(--terracota))}
.outcity__media img{width:100%; aspect-ratio:4/4.4; object-fit:cover}

/* ---------- Pasos ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:s}
.step{background:#fff; border-radius:var(--radio-lg); padding:1.8rem 1.4rem 1.5rem; box-shadow:var(--sombra); border-top:5px solid var(--mostaza); position:relative}
.step__n{position:absolute; top:-20px; left:1.4rem; width:40px; height:40px; border-radius:50%; background:var(--marron); color:var(--mostaza); font-family:var(--display); font-size:1.2rem; display:grid; place-items:center; box-shadow:var(--sombra)}
.step h3{margin-top:.7rem}
.step p{margin:0; font-size:.95rem; color:var(--texto-2)}

/* ---------- Por qué ---------- */
.why{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.why__media{margin:0; border-radius:var(--radio-lg); overflow:hidden; box-shadow:var(--sombra-lg); background:linear-gradient(135deg,var(--mostaza),var(--terracota))}
.why__media img{width:100%; aspect-ratio:4/4.5; object-fit:cover}


/* ---------- FAQ ---------- */
.faq{display:grid; gap:.8rem}
.faq details{background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); border:1px solid rgba(96,21,16,.07); overflow:hidden}
.faq summary{cursor:pointer; padding:1.1rem 1.3rem; font-weight:700; color:var(--marron); list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--display); color:var(--mostaza-600); font-size:1.5rem; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0; padding:0 1.3rem 1.2rem; color:var(--texto-2); font-size:.98rem}

/* ---------- Final / Formulario ---------- */
.final{background:var(--marron-900); color:#f2e2d8; padding:clamp(3.5rem,7vw,6rem) 0; position:relative; overflow:hidden}
.final::before{content:""; position:absolute; inset:0; background:url("../img/patron.png") center/220px repeat; opacity:.06}
.final__in{position:relative; z-index:1; display:grid; grid-template-columns:1fr .9fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.final h2{color:#fff}
.final p{color:#e2cec3}
.final__contact{display:grid; gap:.9rem; margin-top:1.5rem; font-size:.97rem}
.final__contact li{line-height:1.5}
.final__contact a{display:inline-block; padding:.5rem 0; min-height:44px}
.final__contact strong{display:block; font-size:.86rem; margin-bottom:.1rem}
.final__contact strong{color:var(--mostaza)}
.final__contact a{color:#fff; border-bottom:1px solid var(--mostaza)}

.quote{background:var(--crema); border-radius:var(--radio-lg); padding:1.8rem; box-shadow:var(--sombra-lg); display:grid; gap:.9rem}
.quote__title{font-family:var(--display); font-weight:400; font-size:1.5rem; margin:0 0 .3rem; text-align:center}
.quote label{display:grid; gap:.3rem; font-size:.88rem; font-weight:700; color:var(--marron)}
.quote input:not([type="checkbox"]),.quote select{
  font-family:var(--texto-font); font-size:1rem; font-weight:500; padding:.75rem .9rem;
  border:1.5px solid rgba(96,21,16,.18); border-radius:12px; background:#fff; color:var(--texto); width:100%;
  min-height:48px;
}
.quote input:focus,.quote select:focus,.quote__check input:focus-visible{outline:none; border-color:var(--mostaza); box-shadow:0 0 0 3px rgba(246,160,40,.25)}
.quote__row{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.quote__legal{font-size:.78rem; color:var(--texto-2); text-align:center; margin:0}

/* ---------- Footer ---------- */
.footer{background:var(--marron); color:#e8d5c9; padding-top:3.5rem; font-size:.95rem}
.footer__in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:2.2rem; padding-bottom:2.5rem; align-items:start}
.footer__logo{height:88px; width:auto; margin-bottom:1rem}
.footer h3{color:var(--mostaza); font-size:1.05rem; letter-spacing:0; margin-bottom:1rem; font-weight:700}
.footer ul{display:grid; gap:.15rem}
.footer li{line-height:1.45}
.footer ul a{display:inline-block; padding:.55rem 0; min-height:44px}
.footer a{color:#e8d5c9}
@media (hover:hover){.footer a:hover{color:var(--mostaza)}}
.footer__bottom{background:var(--marron-900); padding:1.1rem 0; font-size:.87rem; color:#c3a698; border-top:1px solid rgba(246,160,40,.18)}
.footer__bottom-in{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.footer__bottom p{margin:0}
.footer__bottom a{color:var(--mostaza); display:inline-block; padding:.5rem 0; min-height:44px}
.footer__contact li{line-height:1.5}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--wa); color:#06301c; font-weight:700;
  padding:.85rem 1.25rem; border-radius:999px; box-shadow:0 12px 30px rgba(37,211,102,.45);
  transition:transform .2s ease;
}
@media (hover:hover){.wa-float:hover{transform:scale(1.05)}}
@media (prefers-reduced-motion:no-preference){
  .wa-float{animation:pulse 2.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 12px 30px rgba(37,211,102,.45)}50%{box-shadow:0 12px 40px rgba(37,211,102,.75)}}
}

/* ---------- Autorización de datos personales (Ley 1581 de 2012) ---------- */
.quote__check{
  display:flex; align-items:flex-start; gap:.7rem; min-height:44px;
  font-size:.85rem; font-weight:500; color:var(--texto-2); line-height:1.5;
  background:#fff; border:1.5px solid rgba(96,21,16,.14); border-radius:12px; padding:.85rem .95rem;
  cursor:pointer;
}
.quote__check input[type="checkbox"]{
  width:26px; height:26px; min-width:26px; min-height:26px; flex:0 0 26px;
  margin:0; padding:0; align-self:flex-start;
  accent-color:var(--mostaza-600); cursor:pointer;
}
.quote__check a{
  color:var(--marron); font-weight:700; border-bottom:1.5px solid var(--mostaza);
  display:inline-block; padding:.2rem 0;
}
.quote__check.is-error{border-color:#c0392b; background:#fdf2f0}
.quote__check.is-error a{color:#a5281a}

/* ---------- Página de política de datos ---------- */
.legal{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem); background:var(--crema)}
.legal__title{font-size:clamp(1.7rem,5.2vw,2.7rem); margin-bottom:.4rem}
.legal__meta{color:var(--texto-2); font-size:.95rem; margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:2px solid var(--mostaza)}
.legal h2{font-size:clamp(1.1rem,4vw,1.4rem); margin-top:2.2rem; margin-bottom:.6rem; color:var(--marron)}
.legal p{color:var(--texto); line-height:1.7}
.legal__back{margin-top:3rem; padding-top:1.5rem; border-top:1px dashed rgba(96,21,16,.25)}
.legal__back a{font-weight:700; color:var(--marron); border-bottom:2px solid var(--mostaza); display:inline-block; padding:.5rem 0; min-height:44px}


/* ---------- Páginas de mensaje: gracias y error 404 ---------- */
.mensaje{
  padding:clamp(3rem,8vw,5.5rem) 0; background:var(--crema); position:relative; overflow:hidden;
  min-height:60vh;
}
.mensaje::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(800px 420px at 15% -10%, rgba(246,160,40,.28), transparent 62%),
    radial-gradient(600px 380px at 95% 5%, rgba(217,144,109,.26), transparent 60%);
}
.mensaje__in{position:relative; z-index:1; text-align:center}
.mensaje__icono{
  width:88px; height:88px; margin:0 auto 1.6rem; border-radius:50%;
  display:grid; place-items:center; font-size:2.6rem; line-height:1;
  background:var(--wa); color:#06301c; box-shadow:0 14px 34px rgba(37,211,102,.4);
}
.mensaje__icono--404{
  background:var(--marron); color:var(--mostaza);
  font-family:var(--display); font-size:1.9rem;
  box-shadow:0 14px 34px rgba(61,13,9,.35);
}
.mensaje h1{margin-bottom:.5em}
.mensaje .lead{margin:0 auto 2rem; max-width:56ch}
.mensaje__caja{
  background:#fff; border-radius:var(--radio-lg); padding:1.8rem;
  box-shadow:var(--sombra); border:1px solid rgba(96,21,16,.08);
  text-align:left; margin-bottom:2rem;
}
.mensaje__caja h2{font-size:1.35rem; margin-bottom:.6rem}
.mensaje__caja p:last-child{margin-bottom:0}
.mensaje__enlaces{display:grid; gap:.15rem}
.mensaje__enlaces a{
  display:inline-block; padding:.55rem 0; min-height:44px;
  font-weight:600; color:var(--marron); box-shadow:inset 0 -2px 0 var(--mostaza);
}
.mensaje__acciones{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.2rem}
.mensaje__contacto{
  display:grid; gap:.6rem; font-size:.97rem; color:var(--texto-2);
  padding-top:1.6rem; border-top:1px dashed rgba(96,21,16,.25);
}
.mensaje__contacto strong{color:var(--marron); display:block; font-size:.86rem}
.mensaje__contacto a{color:var(--marron); font-weight:700; display:inline-block; padding:.35rem 0; min-height:40px}

@media (max-width:640px){
  .mensaje__acciones{flex-direction:column}
  .mensaje__acciones .btn{width:100%}
  .mensaje__caja{padding:1.3rem}
  .mensaje__icono{width:72px; height:72px; font-size:2.1rem}
}

/* =========================================================
   RESPONSIVE
   Probado en: iPhone SE (375), iPhone 14/15 (393), iPhone Pro Max (430),
   Android estándar (360), Android pequeño (320), iPad (768),
   iPad Pro y portátiles (1024+) y en orientación horizontal.
   ========================================================= */

/* ---------- Portátiles pequeños y tablets horizontales ---------- */
@media (max-width:1180px){
  .nav{gap:1rem; font-size:.92rem}
  .brand img{height:76px}
}

/* ---------- Tablets: iPad vertical y horizontal ---------- */
@media (max-width:1024px){
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer__in{grid-template-columns:1fr 1fr}
  .footer__col--brand{grid-column:1 / -1}

  /* Menú desplegable */
  .nav{display:none}
  .burger{display:flex}
  .header__in{position:relative}
  .nav.is-open{
    display:grid; position:absolute; top:100%; left:0; right:0; background:var(--crema);
    padding:.5rem 1.4rem 1rem; gap:0; box-shadow:var(--sombra-lg); border-bottom:3px solid var(--mostaza);
    max-height:calc(100vh - 100%); overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .nav.is-open a{
    display:flex; align-items:center; min-height:52px; padding:.5rem 0;
    border-bottom:1px solid rgba(96,21,16,.1); font-size:1.02rem;
  }
  .nav.is-open a:last-child{border-bottom:0}
}

/* ---------- Una sola columna: tablets verticales y móviles grandes ---------- */
@media (max-width:900px){
  .hero__in,.outcity__in,.why,.final__in{grid-template-columns:1fr}
  .why__media{order:2}
  .hero__media{margin-top:2rem}
  .shot--main img{aspect-ratio:1/1}
  .outcity__media img,.why__media img{aspect-ratio:16/11}
  .shot--float{position:static; width:100%; margin-top:1rem; border-width:0}
  .shot--float img{aspect-ratio:16/9}
  .badge-float{
    position:static; margin-top:1rem; max-width:none;
    display:flex; align-items:center; gap:.9rem;
  }
  .badge-float__txt{margin:0}
  .strip__in{flex-direction:column; align-items:flex-start; gap:1.4rem}
  .lead{max-width:none}
  .hero__bullets{max-width:none}
}

/* ---------- Móviles ---------- */
@media (max-width:640px){
  body{font-size:16px}
  html{scroll-padding-top:84px}

  .wrap,.wrap--narrow{width:min(100% - 2rem, var(--max))}
  .section{padding:3rem 0}
  .section__head{margin-bottom:2rem}

  .grid--4,.grid--3,.grid--2,.steps,.footer__in,.quote__row,.steps-mini{grid-template-columns:1fr}
  .footer__col--brand{grid-column:auto}

  /* Encabezado compacto para ganar pantalla */
  .header__in{padding:.5rem 0; gap:.6rem}
  .brand img{height:56px}
  .header__cta .btn--wa.btn--sm{display:none}
  .btn--tel{display:inline-flex; padding:.6rem 1rem; min-height:44px}

  /* Botones a lo ancho y cómodos de tocar */
  .hero__actions{width:100%}
  .hero__actions .btn,.strip__in .btn{width:100%}
  .btn{min-height:48px}
  .btn--lg{padding:1rem 1.5rem; font-size:1.05rem}

  /* Textos */
  h1{font-size:clamp(1.85rem,7.2vw,2.35rem); line-height:1.18}
  h2{font-size:clamp(1.45rem,5.6vw,1.85rem)}
  .lead{font-size:1.06rem}
  .section__sub{font-size:1rem}

  /* Tarjetas y pasos */
  .card__body{padding:1.2rem}
  .steps{gap:2rem}
  .step{padding:1.6rem 1.2rem 1.3rem}
  .sectors__list{gap:.5rem}
  .sectors__list li{font-size:.9rem}

  /* Formulario */
  .quote{padding:1.3rem}
  .quote__check{font-size:.82rem}

  /* Pie de página */
  .footer__in{gap:2rem; padding-bottom:2rem}
  .footer__bottom-in{flex-direction:column; text-align:center; gap:.5rem}

  /* Botón flotante convertido en icono, respetando la zona segura del iPhone */
  .wa-float__txt{display:none}
  .wa-float{
    padding:1rem; border-radius:50%;
    right:max(14px, env(safe-area-inset-right));
    bottom:max(14px, env(safe-area-inset-bottom));
  }
  /* Que el botón flotante no tape el final de la página */
  .footer__bottom{padding-bottom:5rem}
}

/* ---------- Móviles pequeños: iPhone SE y Android de 320 px ---------- */
@media (max-width:359px){
  .wrap,.wrap--narrow{width:min(100% - 1.6rem, var(--max))}
  .brand img{height:50px}
  h1{font-size:1.72rem}
  .btn--lg{font-size:1rem; padding:.95rem 1.1rem}
  .badge-float{flex-direction:column; align-items:flex-start; gap:.3rem}
  .quote{padding:1.1rem}
}

/* ---------- Orientación horizontal en móviles: pantalla muy baja ---------- */
@media (max-height:480px) and (orientation:landscape){
  .header{position:static}
  .brand img{height:44px}
  .header__in{padding:.4rem 0}
  .hero{padding:1.5rem 0 2rem}
  .section{padding:2.5rem 0}
  .wa-float{padding:.7rem; bottom:max(10px, env(safe-area-inset-bottom))}
  .wa-float .ico-wa--lg{width:22px; height:22px; flex-basis:22px}
}

/* ---------- Pantallas altas y anchas: evitar líneas larguísimas ---------- */
@media (min-width:1400px){
  .legal p,.legal h2{max-width:70ch}
}

/* ---------- Respeta a quien pide menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}