/* Antes esta pagina declaraba su propia paleta y su propia fuente (Outfit),
   por lo que el cotizador se veia como otro producto. Ahora hereda los
   tokens y la tipografia de tpl-foundation.css. */
:root{--blue:var(--tpl-navy-900);--blue2:var(--tpl-navy-700);--ink:#14212e;--muted:var(--tpl-muted);--line:var(--tpl-line);--soft:var(--tpl-surface-2);--green:#15805f;--yellow:var(--tpl-gold-400);--white:#fff;--shadow:var(--tpl-shadow-md)}body{background:var(--tpl-surface-3)}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:sticky;top:0;z-index:30}.brand img{height:66px;width:auto}.topbar nav{display:flex;gap:24px}.topbar a{color:var(--blue);font-weight:800;text-decoration:none}.page-shell{max-width:1440px;margin:auto;padding:30px 24px 70px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.welcome{padding:30px 34px;display:flex;justify-content:space-between;gap:30px;align-items:center}.eyebrow,.mini-label{font-size:.76rem;letter-spacing:.14em;font-weight:900;color:var(--blue2)}h1{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.1;margin:.3rem 0 1rem;max-width:800px}h2{margin:.2rem 0 .5rem}p{color:var(--muted);line-height:1.55}.progress{display:flex;gap:8px;flex-wrap:wrap}.progress span{padding:8px 12px;border-radius:99px;background:#eef2f6;color:var(--tpl-ink-3);font-size:.78rem;font-weight:800}.progress .done{background:#dff4eb;color:#12624b}.progress .active{background:#e4eef9;color:var(--blue)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;margin-top:24px}.content-column{display:grid;gap:20px}.parcel-summary{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:22px}.parcel-summary img{width:100%;height:160px;object-fit:cover;border-radius:18px;background:#e9eef2}.virtues{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.virtues span{background:#edf7f3;color:#14624b;border-radius:99px;padding:7px 10px;font-size:.78rem;font-weight:800}.step{padding:28px}.step-heading{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}.step-heading>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;flex:none}.step-heading p{margin:0}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.choice-card,.final-actions button,.size-grid button,.material-card,.prefab-card{border:1px solid var(--line);background:#fff;border-radius:20px;padding:20px;text-align:left;cursor:pointer;transition:.2s}.choice-card:hover,.choice-card.active,.size-grid button:hover,.size-grid button.active,.material-card:hover,.material-card.active,.prefab-card:hover,.prefab-card.active,.final-actions button:hover{border-color:var(--blue2);box-shadow:0 10px 28px rgba(8,70,125,.12);transform:translateY(-2px)}.choice-card strong,.final-actions strong{font-size:1.15rem;color:var(--blue);display:block}.choice-card small,.final-actions small{color:var(--muted)}.choice-card ul{padding-left:18px;color:#506173;font-size:.9rem}.prefab-filters,.manual-fields,.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}label{display:grid;gap:7px;color:#435365;font-weight:700;font-size:.88rem}input,select{width:100%;border:1px solid #cfdbe4;border-radius:12px;padding:12px 13px;background:#fff;color:var(--ink)}.prefab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.prefab-card{padding:0;overflow:hidden}.prefab-card img{width:100%;height:145px;object-fit:cover;background:#e8eef3}.prefab-card .body{padding:15px}.prefab-card strong{display:block;color:var(--blue);font-size:1rem}.prefab-card .price{font-size:1.2rem;font-weight:900;margin-top:10px}.prefab-card small{color:var(--muted)}.size-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.size-grid button strong,.size-grid button small{display:block}.material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.material-card strong{display:block;color:var(--blue);font-size:1rem}.material-card .price{font-weight:900;margin-top:10px}.material-card small{color:var(--muted)}.consent{display:flex;align-items:center;gap:9px;margin:8px 0 18px}.consent input{width:auto}.action-row{display:flex;gap:12px;flex-wrap:wrap}.primary,.secondary{border:0;border-radius:13px;padding:13px 18px;font-weight:900;cursor:pointer}.primary{background:var(--blue);color:#fff}.secondary{background:#e8f0f7;color:var(--blue)}.status{min-height:24px;font-weight:700}.inline-form{margin-top:18px;background:var(--soft);border-radius:18px;padding:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.inline-form .primary{align-self:end}.summary{padding:24px;position:sticky;top:102px;height:max-content}.summary-row{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}.summary-row strong{text-align:right}.summary-row.total{font-size:1.1rem;color:var(--blue);border-bottom:0}.budget-box{background:#edf5fb;border-radius:16px;padding:14px;margin:14px 0;display:grid;gap:4px}.budget-box small{font-weight:800}.advisor-note{background:#f6f2df;border-left:4px solid var(--yellow);padding:14px;border-radius:12px;font-weight:700;color:#4f5662}.disclaimer{display:block;margin-top:16px;color:var(--tpl-ink-3);line-height:1.45}@media(max-width:1050px){.layout{grid-template-columns:1fr}.summary{position:static;order:-1}.prefab-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.topbar{height:68px;padding:0 14px}.brand img{height:53px}.topbar nav a:first-child{display:none}.page-shell{padding:16px 12px 50px}.welcome{padding:23px;display:block}.progress{margin-top:18px}.parcel-summary{grid-template-columns:1fr}.parcel-summary img{height:220px}.choice-grid,.prefab-filters,.manual-fields,.form-grid,.material-grid,.inline-form{grid-template-columns:1fr}.size-grid{grid-template-columns:repeat(2,1fr)}.prefab-grid{grid-template-columns:1fr}.step{padding:21px}.action-row>*{width:100%}}

.project-launch{background:linear-gradient(135deg,#002b54,#005089);box-shadow:0 12px 28px rgba(6,61,114,.22);padding-inline:24px}.project-launch:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(6,61,114,.28)}

/* P4: claridad de costos y continuidad del proyecto */
.cost-scope{margin:14px 0;padding:14px;border:1px solid #d9e5ec;border-radius:14px;background:#f7fafc;display:flex;flex-wrap:wrap;gap:7px}.cost-scope strong{width:100%;font-size:.82rem;color:#173e5b}.cost-scope span{font-size:.72rem;font-weight:800;color:#496476;background:#eaf2f6;border-radius:999px;padding:6px 9px}.summary-row.total span:after{content:' · parcela + vivienda';display:block;font-size:.66rem;font-weight:650;color:#6d8190}.disclaimer strong{color:#163f5d}.project-launch{min-height:48px}@media(max-width:680px){.summary{position:static}.action-row{position:sticky;bottom:8px;z-index:15;background:rgba(255,255,255,.96);padding:10px;border-radius:16px;box-shadow:0 12px 32px rgba(4,45,75,.18)}.action-row button{width:100%}}

/* GALERÍA HERO - PREMIUM UI */
.tpl-emotional-hero { position: relative; overflow: hidden; background: var(--blue); }
.hero-gallery-overlay { position: absolute; inset: 0; z-index: 1; display: flex; opacity: 0.6; transition: opacity 0.5s ease; }
.hero-gallery-overlay.has-images { opacity: 0.85; }
.hero-gallery-overlay img { width: 100%; height: 100%; object-fit: cover; }
/* Grid para múltiples imágenes */
.hero-gallery-overlay.gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; }
.hero-gallery-overlay.gallery-grid img:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.hero-gallery-overlay.gallery-grid img:nth-child(2) { grid-column: 2; grid-row: 1; }
.hero-gallery-overlay.gallery-grid img:nth-child(3) { grid-column: 2; grid-row: 2; }
.hero-gallery-overlay.gallery-grid img:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
/* Gradiente para asegurar legibilidad del texto */
.tpl-emotional-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,61,114,0.95) 0%, rgba(6,61,114,0.7) 40%, rgba(6,61,114,0.1) 100%); z-index: 2; pointer-events: none; }
.tpl-emotional-hero__content { position: relative; z-index: 3; }

@media (max-width: 768px) {
  .housing-grid, .material-grid, .prefab-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Pista de campo opcional: correo o WhatsApp, basta con uno */
.field-hint{font-weight:600;font-size:.74rem;color:var(--muted);letter-spacing:0}
/* El mensaje de validacion vive en #save-status */
.status:not(:empty){background:#fff4f4;border:1px solid #f3c9c9;color:#a33a3a;border-radius:10px;padding:9px 12px;margin-top:10px}
/* Cantidad calculada sola (m2 de la casa, perimetro de la parcela) */
.extra-auto{font-size:.78rem;color:var(--blue2);font-weight:700;white-space:nowrap}

/* ---------------------------------------------------------------------------
   Orden del bloque de montos frente al formulario de contacto
   ---------------------------------------------------------------------------
   #save-step salio de .content-column y ahora es hijo directo de .layout, para
   que en una sola columna el orden del DOM sea:
       pasos 1-4  ->  montos  ->  datos para enviar la cotizacion
   Antes el resumen tenia `order:-1` y quedaba arriba del todo: el usuario veia
   "$0" antes de haber elegido nada, y al llegar al formulario ya no tenia los
   montos a la vista.

   En escritorio se recolocan por grilla para no perder el resumen fijo a la
   derecha: los pasos y el formulario van en la columna izquierda, uno bajo el
   otro, y el resumen ocupa la columna derecha.
   --------------------------------------------------------------------------- */
@media (min-width: 1051px) {
  .layout > .content-column { grid-column: 1; grid-row: 1; }
  .layout > .summary { grid-column: 2; grid-row: 1 / span 2; }
  .layout > #save-step { grid-column: 1; grid-row: 2; }
}

@media (max-width: 1050px) {
  /* El order:-1 heredado subia el resumen al tope; aqui manda el DOM. */
  .layout > .summary { order: 0; }
}

/* UI Fase 3 y 4 (Acordeón, Catálogo visual) */
.project-snapshot-card { display: flex; align-items: center; background: var(--bg-surface-2, #fff); padding: 1rem; border-radius: 12px; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); gap: 1rem; border: 1px solid var(--border-color, #eee); }
.snapshot-check { background: var(--tpl-primary, #4caf50); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }
.snapshot-info { flex: 1; display: flex; flex-direction: column; }
.snapshot-info span { font-size: 0.75rem; color: #666; font-weight: 700; letter-spacing: 0.05em; }
.snapshot-info strong { font-size: 1.1rem; color: var(--text-main, #222); line-height: 1.2; }
.snapshot-info small { color: #888; font-size: 0.85rem; }
.snapshot-price { font-weight: 800; font-size: 1.1rem; color: var(--tpl-primary, #4caf50); }

.house-card { background: white; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; text-align: left; cursor: pointer; transition: all 0.2s; display:flex; flex-direction:column; padding:0; }
.house-card:hover { border-color: var(--tpl-primary, #4caf50); transform: translateY(-2px); }
.house-card.selected { border-color: var(--tpl-primary, #4caf50); }
.house-card img { width: 100%; height: 160px; object-fit: cover; }
.house-card-content { padding: 1rem; display:flex; flex-direction:column; gap:0.25rem; }
.house-card-content strong { font-size: 1rem; color:#222; }
.house-card-content small { color: #666; font-size: 0.85rem; }
.house-card-content .price { font-weight: 700; color: var(--tpl-primary, #4caf50); font-size: 1.1rem; margin-top:0.5rem; }

.material-card.selected { border-color: var(--tpl-primary, #4caf50); background: #f0fdf4; }

.extra-card { display: flex; align-items: center; background: white; border: 1px solid #ddd; padding: 1rem; border-radius: 12px; cursor: pointer; transition: 0.2s; gap: 1rem; text-align: left; margin-bottom: 0.5rem; }
.extra-card.selected { border-color: var(--tpl-primary, #4caf50); background: #f0fdf4; }
.extra-check { width: 24px; height: 24px; border: 2px solid #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: transparent; font-weight: bold; flex-shrink: 0; }
.extra-card.selected .extra-check { background: var(--tpl-primary, #4caf50); border-color: var(--tpl-primary, #4caf50); color: white; }
.extra-info { flex: 1; display: flex; flex-direction: column; }
.extra-info strong { font-size: 1rem; color: #333; }
.extra-info small { color: #666; font-size: 0.85rem; }
.extra-qty { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.extra-qty-input { width: 64px; padding: 0.3rem; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-weight: 700; }
.extra-qty-input:focus { outline: 2px solid var(--tpl-primary, #4caf50); outline-offset: 1px; }
.extra-unit { color: #666; font-size: 0.85rem; font-weight: 700; }
.extra-unit-price { color: #0a5ca6 !important; font-weight: 700; margin-top: 2px; }
.extra-auto-hint { color: #687789; font-size: 0.78rem; }
.extra-reset { width: 100%; background: none; border: 0; padding: 2px 0 0; color: #0a5ca6; font-size: 0.72rem; font-weight: 700; text-decoration: underline; cursor: pointer; text-align: right; }
.extra-price { font-weight: 700; color: #444; white-space: nowrap; }
.foundation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; }
.extras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; }

/* ───────────────────────────────────────────────────────────────────
   DISEÑO PROPIO: Tarjetas de tamaño con foto de referencia
   ─────────────────────────────────────────────────────────────────── */
.size-grid--visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.size-card {
  border: 1px solid var(--line, #ddd);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}
.size-card:hover,
.size-card.active {
  border-color: var(--blue2, #005089);
  box-shadow: 0 10px 28px rgba(8,70,125,.12);
  transform: translateY(-2px);
}
.size-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: #e9eef2;
}
.size-card__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.size-card__body strong {
  font-size: 1.05rem;
  color: var(--blue, #002b54);
}
.size-card__body small {
  color: var(--muted, #667);
  font-size: 0.85rem;
  font-weight: 700;
}
.size-card__desc {
  color: var(--muted, #667);
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 4px;
}

/* ───────────────────────────────────────────────────────────────────
   DISEÑO PROPIO: Tarjetas de material constructivo con foto
   ─────────────────────────────────────────────────────────────────── */
.material-card--visual {
  border: 1px solid var(--line, #e0e0e0);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}
.material-card--visual:hover {
  border-color: var(--blue2, #005089);
  box-shadow: 0 10px 28px rgba(8,70,125,.12);
  transform: translateY(-2px);
}
.material-card--visual.selected {
  border-color: var(--tpl-primary, #4caf50);
  background: #f0fdf4;
  box-shadow: 0 0 0 2px var(--tpl-primary, #4caf50);
}
.material-card--visual img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: #e9eef2;
}
.material-card__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.material-card__body strong {
  font-size: 1.05rem;
  color: var(--blue, #002b54);
}
.material-card__desc {
  color: var(--muted, #667);
  font-size: 0.78rem;
  line-height: 1.35;
}
.material-card__price {
  font-weight: 900;
  font-size: 1rem;
  color: var(--tpl-primary, #4caf50);
  margin-top: 6px;
}

/* Responsive: 1 columna en móvil */
@media (max-width: 720px) {
  .size-grid--visual {
    grid-template-columns: 1fr;
  }
  .size-card img {
    height: 160px;
  }
  .material-card--visual img {
    height: 130px;
  }
}