/* =========================================================
   Grupo Constructor La Soñada — Estilos base compartidos
   Usado por index.html, proyecto.html y resenas.html
   Cada página conserva su propio <style> con lo que le es
   exclusivo (hero, wizard, galería, reseñas, etc).
   ========================================================= */

:root{
  --orange:#E8622C;
  --orange-dark:#C94F1F;
  --cream:#F4EEE1;
  --cream-2:#EDE4D2;
  --dark:#161513;
  --dark-2:#1F1D1A;
  --ink:#1A1A1A;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-fast: cubic-bezier(.33,1,.68,1);
  --ease-soft: cubic-bezier(.25,.46,.15,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{font-family:'Poppins',sans-serif; color:var(--ink); background:var(--cream); overflow-x:hidden;}
h1,h2,h3{font-weight:800; line-height:1.12; letter-spacing:-0.02em;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(232,98,44,0.12); color:var(--orange);
  padding:7px 16px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
}
.badge.on-dark{ background:rgba(255,255,255,0.1); color:#fff; }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 30px; border-radius:999px; font-weight:600; font-size:15px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s ease;
}
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 8px 24px -8px rgba(232,98,44,.6);}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(232,98,44,.7); background:var(--orange-dark);}
.btn-light{ background:#F6F1E7; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); background:#fff; }
.btn-outline{ background:transparent; color:var(--ink); border:1.5px solid rgba(0,0,0,.15); }
.btn-outline:hover{ background:rgba(0,0,0,.05); }

/* Header isla — idéntico en las 3 páginas */
header.site{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:100; width:min(92%, 900px);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 10px 16px; border-radius:999px;
  background:rgba(22,21,19,0.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.08);
  transition:padding .5s var(--ease), background .5s var(--ease), width .5s var(--ease);
}
header.site.scrolled{ padding:6px 10px 6px 14px; background:rgba(22,21,19,0.8); width:min(88%,780px);}
.logo{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:15px;}
.logo .mark{
  width:34px; height:34px; border-radius:10px;
  background:#fff; padding:4px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.logo .mark img{ width:100%; height:100%; object-fit:contain; }
.header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.header-phone{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.1);
  color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .3s ease, transform .3s ease;
}
.header-phone:hover{ background:var(--orange); transform:translateY(-1px); }
.menu-btn{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.1);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  position:relative; flex-shrink:0;
}
.menu-btn .bar{ width:15px; height:2px; border-radius:2px; background:#fff; transition:transform .5s var(--ease), opacity .3s ease; }
.menu-btn.active .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-btn.active .bar:nth-child(2){ opacity:0; transform:scaleX(0); }
.menu-btn.active .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:absolute; top:calc(100% + 10px); left:0; right:0;
  background:rgba(18,17,15,0.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.08); border-radius:26px;
  padding:10px; display:flex; flex-direction:column; gap:2px;
  max-height:0; opacity:0; overflow:hidden; pointer-events:none; transform:translateY(-10px);
  transition:max-height .55s var(--ease), opacity .4s ease-out, transform .5s var(--ease);
}
.mobile-menu.open{ max-height:min(700px, calc(100vh - 100px)); opacity:1; transform:translateY(0); pointer-events:auto; overflow-y:auto; }
.mobile-menu a{
  color:#fff; font-size:14.5px; font-weight:600; padding:13px 18px; border-radius:14px;
  transition:background .3s ease, color .3s ease, padding-left .3s ease;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible{ background:rgba(232,98,44,0.2); color:var(--orange); padding-left:24px; }

/* Burbuja flotante de WhatsApp — idéntica en las 3 páginas */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:200;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -6px rgba(37,211,102,.6);
  animation: wa-pulse 2.4s infinite;
}
@keyframes wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

@media (max-width:600px){
  header.site{ top:12px; width:92%; padding:8px 8px 8px 14px; }
  header.site.scrolled{ width:88%; }
  .logo{ font-size:13px; gap:8px; }
  .logo .mark{ width:30px; height:30px; font-size:14px; border-radius:9px; }
  .menu-btn{ width:34px; height:34px; }
  .header-phone{ width:32px; height:32px; }
  .wa-float{ width:52px; height:52px; bottom:18px; right:18px; }
}

/* Aviso de cookies — idéntico en todas las páginas */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  background:var(--dark); color:#fff;
  padding:18px 20px; box-shadow:0 -8px 24px -8px rgba(0,0,0,.35);
  transform:translateY(120%); transition:transform .5s var(--ease);
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner-inner{ max-width:1040px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cookie-banner p{ font-size:13px; opacity:.85; line-height:1.55; max-width:640px; }
.cookie-banner a{ color:var(--orange); text-decoration:underline; }
.cookie-banner .btn{ padding:11px 22px; font-size:13.5px; white-space:nowrap; flex-shrink:0; }
@media (max-width:640px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; text-align:center; }
  .cookie-banner .btn{ width:100%; justify-content:center; }
}

/* Páginas simples (404, gracias, privacidad, términos) */
.simple-page{ min-height:70vh; display:flex; align-items:center; padding:150px 0 80px; }
.simple-page.top-align{ display:block; padding-top:140px; }
.simple-content{ max-width:640px; }
.simple-content .badge{ margin-bottom:18px; }
.simple-content h1{ font-size:2.2rem; margin-bottom:16px; }
.simple-content p{ opacity:.75; line-height:1.7; margin-bottom:14px; font-size:15px; }
.simple-content .btn{ margin-top:14px; }
.legal-content{ max-width:760px; margin:0 auto; padding:150px 0 80px; }
.legal-content h1{ font-size:2rem; margin-bottom:8px; }
.legal-content .updated{ opacity:.55; font-size:13px; margin-bottom:34px; }
.legal-content h2{ font-size:1.15rem; margin:34px 0 12px; }
.legal-content p, .legal-content li{ opacity:.78; line-height:1.75; font-size:14.5px; margin-bottom:10px; }
.legal-content ul{ padding-left:20px; margin-bottom:14px; }
.legal-content a{ color:var(--orange); text-decoration:underline; }
.error-code{ font-size:5.5rem; font-weight:800; color:var(--orange); line-height:1; margin-bottom:6px; }