/* ============================================================
   HG Patrimonial — Landings (HTML estático)
   Edita libremente y refresca con Live Server. Sin compilar.
   Paleta: blanco · #EEEEEE · bronce #443c36 · texto #1B1B1B
   Fuente: Jost
   ============================================================ */

:root {
  --white: #ffffff;
  --gray: #eeeeee;
  --bronze: #443c36;
  --bronze-dark: #6e6040;
  --ink: #1b1b1b;
  --line: #eeeeee;
  --max: 1480px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Jost", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 300; line-height: 1.28; margin: 0; }
/* H1 SIEMPRE EN MAYÚSCULAS, peso fino */
h1 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.22;
}

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
@media (min-width: 1024px) { .section { padding: 112px 0; } }
.section--gray { background: var(--gray); }
.section--bronze { background: var(--bronze); color: var(--white); }
.section--ink { background: var(--ink); color: var(--white); }
.narrow { max-width: 760px; }

/* ---------- Tipografía utilidades ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin: 0 0 12px;
}
.section--bronze .eyebrow, .section--ink .eyebrow, .hero .eyebrow { color: var(--white); }
.title { font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--ink); }
.section--bronze .title, .section--ink .title { color: var(--white); }
.subtitle { font-size: 1.125rem; color: rgba(27,27,27,0.65); margin-top: 16px; max-width: 720px; }
@media (min-width: 1024px) { .subtitle--nowrap { max-width: none; white-space: nowrap; } }
.section--bronze .subtitle, .section--ink .subtitle { color: rgba(255,255,255,0.72); }

/* ---------- Botones (esquinas rectas) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 26px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 500; text-align: center;
  transition: transform 0.2s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--bronze); color: #fff; }
.btn--primary:hover { background: var(--bronze-dark); }
.btn--light { background: #fff; color: var(--ink); box-shadow: 0 4px 20px -8px rgba(0,0,0,0.25); }
.btn--light:hover { background: var(--gray); }
.btn--outline { background: transparent; border: 1px solid rgba(27,27,27,0.3); color: var(--ink); }
.btn--outline:hover { border-color: var(--bronze); }
.section--bronze .btn--outline, .section--ink .btn--outline,
.hero .btn--outline { color:#fff; border-color: rgba(255,255,255,0.6); }
.hero .btn--outline:hover { border-color:#fff; background: rgba(255,255,255,0.12); }
.btn--block { width: 100%; }
/* Móvil: CTAs a ancho completo */
@media (max-width: 767px) {
  .btn { width: 100%; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .carousel__arrow { width: 38px; } /* las flechas del carrusel no son CTA: mantienen su tamaño */
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__bar { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo svg { height: 36px; width: auto; }
.logo__name { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.05; }
.logo__sub { display: block; font-size: 0.62rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--bronze); }
.logo--light .logo__name { color: #fff; }
.logo--light .logo__sub { color: #fff; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.header__phone { font-size: 0.9rem; font-weight: 500; }
/* Sin header en móvil: el CTA fijo inferior cubre la conversión */
@media (max-width: 767px) { .header { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
/* Escritorio: hero + tira de autoridad ocupan justo el viewport */
@media (min-width: 1024px) {
  /* Resta la altura del header fijo (64px) para que hero + tira bronce quepan en el viewport */
  .hero-vp { display: flex; flex-direction: column; height: calc(100vh - 65px); height: calc(100dvh - 65px); overflow: hidden; }
  .hero-vp .hero { flex: 1 1 0%; min-height: 0; display: flex; align-items: center; }
  .hero-vp .hero .container { width: 100%; }
  .hero-vp .hero__inner { padding: 32px 0; }
  .hero-vp .authority { flex: 0 0 auto; }
}
.hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Imagen de fondo fija (parallax) en escritorio */
@media (min-width: 1024px) { .hero__media { background-attachment: fixed; } }
.hero__overlay {
  position: absolute; inset: 0;
  /* Móvil: capa vertical, más opaca arriba y menos abajo */
  background: linear-gradient(to bottom, rgba(27,27,27,0.9), rgba(27,27,27,0.25));
}
@media (min-width: 1024px) {
  /* El color sólido de la columna izquierda se extiende un poco sobre la imagen */
  .hero__overlay { background: linear-gradient(to right, rgba(27,27,27,0.97), rgba(27,27,27,0.82) 30%, rgba(27,27,27,0.4) 60%, rgba(27,27,27,0.1) 88%, transparent); }
}
.hero__inner { position: relative; max-width: 960px; padding: 88px 0; }
/* Logo dentro del hero, solo en móvil (el header se oculta) */
.hero__logo { display: none; }
@media (max-width: 767px) { .hero__logo { display: flex; justify-content: center; margin: 0 auto 22px; } }
/* En el hero móvil mostrar solo el monograma, sin el texto HG Patrimonial */
.hero__logo .logo__name { display: none; }
.hero__logo svg { height: 44px; }
.hero .eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.9rem); margin-top: 16px; text-shadow: 0 2px 26px rgba(0,0,0,0.4); }
/* En escritorio: 3 líneas, sin partir cada segmento, con más interlineado */
@media (min-width: 1024px) {
  .hero h1 { white-space: nowrap; line-height: 1.36; }
  .hero h1 .hl { white-space: normal; }
}
.hero h1 .hl { font-weight: 600; color: #ffffff; }
/* Saltos de línea solo en escritorio (h1 hero en 3 líneas) */
.d-break { display: none; }
@media (min-width: 1024px) { .d-break { display: inline; } }
@media (min-width: 1024px) { .lead-2l { max-width: none; white-space: nowrap; } }
.hero__lead { font-size: 1.18rem; line-height: 1.6; color: rgba(255,255,255,0.92); margin-top: 20px; max-width: 540px; text-shadow: 0 1px 14px rgba(0,0,0,0.45); }
.hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px 28px; margin: 36px 0 0; max-width: 680px; }
@media (min-width: 640px) { .hero__metrics { grid-template-columns: repeat(3,1fr); } }
.metric { border: 0; border-left: 1px solid rgba(255,255,255,0.28); background: none; backdrop-filter: none; padding: 4px 0 4px 18px; }
@media (min-width: 640px) { .hero__metrics .metric:first-child { border-left: 0; padding-left: 0; } }
.metric__n { display:block; font-size: 1.55rem; font-weight: 600; color: #fff; line-height: 1.1; }
.metric__l { display:block; font-size: 0.74rem; color: rgba(255,255,255,0.75); margin-top: 5px; }
/* Móvil: hero centrado */
@media (max-width: 767px) {
  .hero__inner { text-align: center; margin: 0 auto; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__cta { justify-content: center; }
  .hero__metrics { margin: 32px auto 0; gap: 0; max-width: 420px; }
  .hero__metrics .metric { border-left: 0; padding: 14px 10px; text-align: center; }
  /* Separadores del grid 2x2: línea entre columnas y entre filas */
  .hero__metrics .metric:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.2); }
  .hero__metrics .metric:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.2); }
  .hero__metrics .metric:last-child { border-right: 0; }
}

/* ---------- Tira de autoridad ---------- */
.authority { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--gray); }
.authority ul { list-style:none; margin:0; padding:28px 0; display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:center; }
.authority li { display:flex; align-items:center; gap:8px; font-size:0.95rem; font-weight:500; }
.authority .mark { color: var(--ink); }
/* Iconos de línea (Feather-style), color bronce */
.ico { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--bronze); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bullets .ico { margin-top: 1px; }

/* ---------- Grids / Cards ---------- */
.grid { display:grid; gap:24px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width:768px){ .grid--2 { grid-template-columns: repeat(2,1fr);} .grid--3 { grid-template-columns: repeat(3,1fr);} }
.mt-48 { margin-top: 48px; }

.card { background:#fff; border:1px solid var(--line); box-shadow: 0 6px 24px -14px rgba(0,0,0,0.18); display:flex; flex-direction:column; }
.card__media { position:relative; aspect-ratio: 16/10; overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; transition: transform 0.5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__badge { position:absolute; top:16px; left:16px; z-index:2; background: var(--bronze); color:#fff; font-size:0.72rem; font-weight:600; padding:5px 12px; text-transform:uppercase; letter-spacing:0.08em; }
@media (min-width:1024px) { .card__badge { font-size:0.85rem; padding:8px 16px; letter-spacing:0.1em; } }

/* Carrusel de imágenes dentro de una card */
.carousel { position:absolute; inset:0; }
.carousel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .6s var(--ease); }
.carousel img.is-active { opacity:1; }
.card:hover .carousel img { transform: scale(1.05); }
.carousel__dots { position:absolute; bottom:12px; left:0; right:0; z-index:2; display:flex; gap:7px; justify-content:center; }
.carousel__dots button { width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,0.5); transition: background .25s, transform .25s; }
.carousel__dots button.is-active { background:#fff; transform: scale(1.25); }
.carousel__arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(27,27,27,0.45); color:#fff;
  opacity:0; transition: opacity .25s var(--ease), background .25s;
}
.carousel__arrow--prev { left:12px; }
.carousel__arrow--next { right:12px; }
.carousel__arrow:hover { background:rgba(27,27,27,0.78); }
.card__media:hover .carousel__arrow, .card__media:focus-within .carousel__arrow { opacity:1; }
@media (max-width: 767px) { .carousel__arrow { opacity:.9; } }
.card__body { padding:24px; display:flex; flex-direction:column; flex:1; }
.card__zone { font-size:0.72rem; font-weight:500; text-transform:uppercase; letter-spacing:0.14em; color: var(--ink); }
.card__title { font-size:1.25rem; font-weight:600; margin-top:4px; }
.card__text { font-size:0.9rem; color: rgba(27,27,27,0.65); margin-top:12px; flex:1; }
.card__price { font-size:1.1rem; font-weight:600; }

/* zonas */
.zone { background:#fff; border:1px solid var(--line); box-shadow: 0 6px 24px -14px rgba(0,0,0,0.18); overflow:hidden; }
.zone__media { aspect-ratio:4/3; overflow:hidden; }
.zone__media img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.zone:hover .zone__media img { transform: scale(1.05); }
.zone__body { padding:24px; }

/* Ubicaciones: paneles que se expanden al hover (retrato), título siempre legible */
.zones { display:flex; flex-direction:column; gap:16px; }
.zonex {
  position:relative; flex:0 0 auto; min-width:0; height:240px; overflow:hidden;
  cursor:pointer; outline-offset:-2px;
}
.zonex::before {
  content:""; position:absolute; inset:0; background-image:var(--zbg);
  background-size:cover; background-position:center;
  /* Tono cálido común para igualar las 3 fotos (sin desenfoque, nítidas) */
  filter: saturate(1.08) brightness(1.04) contrast(1.02);
}
.zonex::after {
  content:""; position:absolute; inset:0;
  /* Misma capa que la imagen de la calculadora */
  background:linear-gradient(to top, rgba(27,27,27,0.7), transparent);
}
.zonex__content { position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:1; }
.zonex__content h3 { color:#fff; font-size:1.15rem; font-weight:600; line-height:1.2; }
.zonex__content p { color:rgba(255,255,255,0.85); font-size:0.85rem; margin-top:6px; }
@media (min-width:768px) {
  .zones { flex-direction:row; height:480px; }
  .zonex { flex:1 1 0; height:100%; transition: flex-grow .55s var(--ease); }
  /* Al pasar sobre una, esa crece (retrato) y el resto se estrechan */
  .zones:hover .zonex, .zones:focus-within .zonex { flex-grow:.5; }
  .zones .zonex:hover, .zones .zonex:focus-visible { flex-grow:2.1; }
  .zones .zonex:hover::after, .zones .zonex:focus-visible::after { opacity:.85; }
}

/* specs (chips rectos) */
.specs { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.specs li { background: var(--gray); padding:6px 12px; font-size:0.72rem; font-weight:500; display:inline-flex; align-items:center; gap:6px; }
.specs .ico-sm { width:14px; height:14px; flex:0 0 auto; fill:none; stroke:var(--bronze); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* barra progreso */
.progress { margin-top:16px; }
.progress__head { display:flex; justify-content:space-between; font-size:0.72rem; font-weight:500; color: rgba(27,27,27,0.7); margin-bottom:6px; }
.progress__track { height:8px; background: var(--gray); overflow:hidden; }
.progress__bar { height:100%; background: linear-gradient(to right, var(--bronze), var(--bronze-dark)); width:0; transition: width 1.1s var(--ease); }

/* bloques numerados */
.blocks { display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:640px){ .blocks { grid-template-columns: repeat(2,1fr);} }
@media (min-width:1024px){ .blocks { grid-template-columns: repeat(3,1fr);} }
.block { background:#fff; border:1px solid var(--line); padding:28px; }
.block__n { display:flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:50%; background: rgba(68,60,54,0.15); font-weight:600; color: var(--ink); }
.block h3 { font-size:1.1rem; font-weight:600; margin-top:16px; }
.block p { font-size:0.9rem; color: rgba(27,27,27,0.65); margin-top:8px; }
/* Móvil: sección "La mayoría compra vivienda" centrada */
@media (max-width: 767px) {
  .porque .title, .porque .subtitle { text-align: center; }
  .porque .subtitle { margin-left: auto; margin-right: auto; }
  .porque .block { text-align: center; }
  .porque .block__n { margin-left: auto; margin-right: auto; }
}

/* proceso (en bronce) */
.steps { list-style:none; margin:48px 0 0; padding:0; display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:768px){ .steps--2 { grid-template-columns: repeat(2,1fr);} .steps--5 { grid-template-columns: repeat(5,1fr);} }
.step { display:flex; gap:16px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); padding:24px; }
.step__n { font-size:1.8rem; font-weight:300; color:#fff; }
.step h3 { font-size:1.1rem; font-weight:600; color:#fff; }
.step p { font-size:0.9rem; color: rgba(255,255,255,0.65); margin-top:8px; }
.step--light { background:#fff; border:1px solid var(--line); }
.step--light .step__n { color: var(--ink); }
.step--light h3 { color: var(--ink); }
.step--light p { color: rgba(27,27,27,0.65); }

/* Proceso: línea de tiempo + imagen */
.proceso-grid { display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
@media (min-width:900px) { .proceso-grid { grid-template-columns: 0.85fr 1fr; gap:56px; } }
.proceso-media { position:relative; min-height:280px; background-image:var(--zbg); background-size:cover; background-position:center; }
@media (min-width:900px) { .proceso-media { align-self:stretch; min-height:100%; } }
.proceso-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(27,27,27,0.25), transparent 60%); }

/* Línea de tiempo: pasos con progresión visible */
.timeline { list-style:none; margin:0; padding:0; max-width:none; }
.tl-step { position:relative; display:flex; gap:24px; padding-bottom:40px; }
.tl-step:last-child { padding-bottom:0; }
/* línea conectora entre círculos */
.tl-step::before { content:""; position:absolute; left:25px; top:56px; bottom:0; width:2px; background:rgba(255,255,255,0.28); }
.tl-step:last-child::before { display:none; }
.tl-step__num {
  position:relative; z-index:1; flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  background:#fff; color:var(--bronze); display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:600;
}
.tl-step__body { padding-top:5px; }
.tl-step__tag { display:block; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.16em; color:rgba(255,255,255,0.7); }
.tl-step__body h3 { color:#fff; font-size:1.2rem; font-weight:600; margin-top:5px; }
.tl-step__body p { color:rgba(255,255,255,0.74); margin-top:8px; }
/* reveal escalonado */
.timeline .tl-step:nth-child(2) { transition-delay:.12s; }
.timeline .tl-step:nth-child(3) { transition-delay:.24s; }
.timeline .tl-step:nth-child(4) { transition-delay:.36s; }

/* Proceso por pasos con progresión (stepper) */
.flow { list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:4px; }
.flow__step { position:relative; display:flex; align-items:flex-start; gap:16px; padding-bottom:28px; }
.flow__step:last-child { padding-bottom:0; }
/* conector vertical (móvil) */
.flow__step:not(:last-child)::before { content:""; position:absolute; left:25px; top:54px; bottom:4px; width:2px; background:var(--line); }
.flow__num {
  flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:var(--bronze); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1.1rem;
  position:relative; z-index:1;
}
.flow__body { padding-top:6px; }
.flow__body h3 { font-size:1.05rem; font-weight:600; color:var(--ink); }
.flow__body p { margin-top:4px; font-size:0.9rem; color:rgba(27,27,27,0.62); }
@media (min-width:900px) {
  .flow { grid-template-columns: repeat(5,1fr); gap:24px; }
  .flow__step { flex-direction:column; align-items:center; text-align:center; gap:14px; padding-bottom:0; }
  /* conector horizontal entre círculos */
  .flow__step:not(:last-child)::before { top:26px; left:50%; bottom:auto; width:calc(100% + 24px); height:2px; }
  .flow__body { padding-top:0; }
}
.flow .flow__step:nth-child(2){ transition-delay:.08s; }
.flow .flow__step:nth-child(3){ transition-delay:.16s; }
.flow .flow__step:nth-child(4){ transition-delay:.24s; }
.flow .flow__step:nth-child(5){ transition-delay:.32s; }

/* Bucle: onda de intensidad que recorre los pasos 1→5 */
@keyframes step-pulse {
  0%, 16%, 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 0 rgba(68,60,54,0); }
  6% { transform: scale(1.1); filter: brightness(1.3); box-shadow: 0 0 0 7px rgba(68,60,54,0.18); }
}
.flow__num { animation: step-pulse 4s ease-in-out infinite; }
.flow .flow__step:nth-child(1) .flow__num { animation-delay: 0s; }
.flow .flow__step:nth-child(2) .flow__num { animation-delay: .45s; }
.flow .flow__step:nth-child(3) .flow__num { animation-delay: .9s; }
.flow .flow__step:nth-child(4) .flow__num { animation-delay: 1.35s; }
.flow .flow__step:nth-child(5) .flow__num { animation-delay: 1.8s; }
/* Último paso resaltado: anillo pulsante permanente + título en bronce */
.flow__step:last-child .flow__num::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--bronze); animation: ring-pulse 2.4s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.18); opacity: .1; }
}
.flow__step:last-child .flow__body h3 { color: var(--bronze); }

/* testimonios */
.metrics-row { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-top:40px; }
@media (min-width:1024px){ .metrics-row { grid-template-columns: repeat(4,1fr);} }
.metric-box { background: var(--gray); padding:24px; text-align:center; }
.metric-box b { display:block; font-size:1.8rem; font-weight:600; color: var(--ink); }
.metric-box span { font-size:0.9rem; color: rgba(27,27,27,0.6); }
.quote { background:#fff; border:1px solid var(--line); box-shadow:0 6px 24px -14px rgba(0,0,0,0.18); padding:28px; display:flex; flex-direction:column; }
.quote__mark { font-size:2.5rem; line-height:1; color: var(--ink); }
.quote blockquote { margin:8px 0 0; font-size:1rem; }
.quote figcaption { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; font-size:0.9rem; }
.quote figcaption b { display:block; }
.quote figcaption span { color: rgba(27,27,27,0.55); }

/* Reseñas estilo Google */
.reviews-summary { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:28px auto 0; }
.reviews-summary__g { width:26px; height:26px; flex:0 0 auto; }
.reviews-summary__score { font-size:1.5rem; font-weight:600; color:var(--ink); }
.reviews-summary__stars { color:#fbbc04; letter-spacing:2px; font-size:1.1rem; }
.reviews-summary__text { color:rgba(27,27,27,0.6); font-size:0.92rem; }

.review { background:#fff; border:1px solid var(--line); box-shadow:0 6px 24px -16px rgba(0,0,0,0.18); padding:24px; display:flex; flex-direction:column; }
.review__head { display:flex; align-items:center; gap:12px; }
.review__avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:1.05rem; flex:0 0 auto; text-transform:uppercase; }
.review__who { display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.review__name { font-weight:600; color:var(--ink); }
.review__time { font-size:0.8rem; color:rgba(27,27,27,0.5); }
.review__g { width:22px; height:22px; flex:0 0 auto; }
.review__stars { color:#fbbc04; font-size:1.05rem; letter-spacing:2px; margin:14px 0 8px; }
.review__text { margin:0; color:rgba(27,27,27,0.82); font-size:0.95rem; line-height:1.65; }
.review__ctx { margin:12px 0 0; font-size:0.8rem; color:rgba(27,27,27,0.45); }

/* Carrusel de reseñas */
.reviews-carousel { position:relative; }
.reviews-track {
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 2px;
}
.reviews-track::-webkit-scrollbar { display:none; }
.reviews-track .review { flex:0 0 100%; scroll-snap-align:center; opacity:1 !important; transform:none !important; }
@media (min-width:640px) { .reviews-track .review { flex-basis: calc(50% - 10px); } }
@media (min-width:1024px) { .reviews-track .review { flex-basis: calc(33.333% - 14px); } }
.reviews-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:#fff; box-shadow:0 6px 18px -6px rgba(0,0,0,0.3); color:var(--ink);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.reviews-nav:hover { background:var(--gray); }
.reviews-nav--prev { left:-14px; }
.reviews-nav--next { right:-14px; }
@media (max-width:767px) { .reviews-nav { display:none; } }
.reviews-more { text-align:center; margin-top:24px; }
.reviews-more__link { display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--ink); border-bottom:1px solid transparent; padding-bottom:1px; }
.reviews-more__link:hover { border-bottom-color: currentColor; }
/* Móvil: testimonios en carrusel con swipe (1 por pantalla) */
@media (max-width: 767px) {
  .testi-grid {
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin-left:-20px; margin-right:-20px; padding:0 20px 6px;
  }
  .testi-grid::-webkit-scrollbar { display:none; }
  .testi-grid .quote, .testi-grid .review { flex:0 0 87%; scroll-snap-align:center; opacity:1 !important; transform:none !important; }
}

/* ---------- Calculadora ---------- */
.calc { display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:1024px){ .calc { grid-template-columns: repeat(2,1fr);} }
.calc__panel { background:#fff; border:1px solid var(--line); box-shadow:0 8px 30px -16px rgba(0,0,0,0.22); padding:28px; }
.field { margin-bottom:22px; }
.field__head { display:flex; justify-content:space-between; align-items:baseline; }
.field__label { font-size:0.9rem; font-weight:500; color: rgba(27,27,27,0.8); }
.field__val { font-size:1.15rem; font-weight:600; }
input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:6px; margin-top:12px; background: var(--gray); cursor:pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background: var(--bronze); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
input[type="range"]::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background: var(--bronze); border:3px solid #fff; }
.results { display:grid; grid-template-columns: 1fr; gap:12px; margin-top:24px; }
@media (min-width:640px){ .results--3 { grid-template-columns: repeat(3,1fr);} }
.result { background: var(--gray); padding:16px; }
.result--accent { background: var(--bronze); color:#fff; }
.result b { display:block; font-size:1.4rem; font-weight:600; }
.result span { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color: rgba(27,27,27,0.55); }
.result--accent span { color: rgba(255,255,255,0.85); }
.result--big { text-align:center; padding:24px; }
.result--big b { font-size: clamp(2rem,6vw,3rem); }
.calc__note { font-size:0.85rem; color: rgba(27,27,27,0.55); margin-top:24px; }
.calc__img { position:relative; min-height:280px; overflow:hidden; }
.calc__img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.calc__img .cap { position:absolute; bottom:0; left:0; padding:24px; color:#fff; }
.calc__img .cap .k { text-transform:uppercase; letter-spacing:0.18em; font-size:0.8rem; color:#fff; }
.calc__img::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(27,27,27,0.7), transparent); }
.calc__img .cap { z-index:1; }

/* ---------- Formulario ---------- */
.form-grid { display:grid; gap:40px; grid-template-columns:1fr; align-items:start; }
@media (min-width:1024px){ .form-grid { grid-template-columns: repeat(2,1fr);} }
.bullets { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px; }
.bullets li { display:flex; gap:12px; }
.bullets .check { color: var(--ink); }
.lead-form { background:#fff; border:1px solid var(--line); box-shadow:0 8px 30px -16px rgba(0,0,0,0.22); padding:28px; }
.lead-form h3 { font-size:1.25rem; font-weight:600; }
.form-row { display:grid; gap:16px; margin-top:16px; }
@media (min-width:640px){ .form-row--2 { grid-template-columns: repeat(2,1fr);} }
.input-label { display:block; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color: rgba(27,27,27,0.7); margin-bottom:8px; }
.input-label .req { color: var(--bronze); }
.input, .select {
  width:100%; min-height:48px; padding:12px 16px; border:1px solid var(--line);
  background:#fff; font-family:inherit; font-size:1rem; color: var(--ink);
}
.input:focus, .select:focus { outline:none; border-color: var(--bronze); box-shadow:0 0 0 3px rgba(68,60,54,0.25); }
.input.error, .select.error { border-color:#cf2e2e; }
.field-error { color:#cf2e2e; font-size:0.85rem; margin:6px 0 0; }
.field-ok { border-color:#4a8a52 !important; }
/* Teléfono con prefijo */
.phone-field { display:flex; gap:8px; }
.phone-field .phone-prefix { flex:0 0 auto; width:auto; min-width:96px; padding-right:34px; background-position:right .6rem center; }
.phone-field .input { flex:1 1 auto; min-width:0; }
.form-note { font-size:0.72rem; color: rgba(27,27,27,0.5); text-align:center; margin-top:16px; }
.form-status { margin-top:16px; }
.form-status p { background: rgba(207,46,46,0.1); color:#cf2e2e; padding:12px 16px; font-size:0.85rem; font-weight:500; margin:0; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,0.8); }
.footer__grid { display:grid; gap:40px; grid-template-columns:1fr; padding:56px 0; }
@media (min-width:768px){ .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer h4 { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.18em; color:#fff; margin:0 0 16px; }
.footer ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:0.9rem; }
.footer a:hover { color:#fff; }
.footer__desc { font-size:0.9rem; color: rgba(255,255,255,0.6); max-width:360px; margin-top:16px; }
.footer__legal { border-top:1px solid rgba(255,255,255,0.1); padding:24px 0; font-size:0.75rem; color: rgba(255,255,255,0.45); }

/* ---------- Sticky CTA (solo móvil) ---------- */
.sticky-cta {
  position: fixed; left:0; right:0; bottom:0; z-index:50; padding:12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.sticky-cta.is-hidden { opacity:0; transform: translateY(24px); pointer-events:none; }
/* Sombra + fino contorno para despegarlo de fondos del mismo color */
.sticky-cta .btn { box-shadow: 0 10px 30px -6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.18); }
@media (min-width:768px){ .sticky-cta { display:none; } }

/* ---------- Selector (home) ---------- */
.home { min-height:100vh; display:flex; flex-direction:column; background: var(--ink); color:#fff; }
.home__main { flex:1; display:flex; flex-direction:column; justify-content:center; padding:48px 0; }
.home h1 { font-size: clamp(1.8rem,5vw,3rem); max-width:760px; margin-top:16px; }
.home__cards { display:grid; gap:24px; grid-template-columns:1fr; margin-top:48px; }
@media (min-width:768px){ .home__cards { grid-template-columns: repeat(2,1fr);} }
.home__card { border:1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); padding:36px; transition: border-color .3s, background .3s; }
.home__card:hover { border-color:#fff; background: rgba(255,255,255,0.1); }
.home__card .k { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.18em; color:#fff; }
.home__card .t { display:block; font-size:1.6rem; font-weight:300; margin-top:12px; text-transform:uppercase; letter-spacing:0.04em; }
.home__card .d { display:block; color: rgba(255,255,255,0.65); margin-top:12px; }
.home__card .go { display:inline-block; margin-top:24px; color:#fff; font-weight:500; }

/* ---------- Gracias ---------- */
.thanks { min-height:100vh; display:flex; flex-direction:column; background: var(--ink); color:#fff; text-align:center; }
.thanks__main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 0; }
.thanks__check { width:64px; height:64px; border-radius:50%; background: var(--bronze); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.thanks h1 { font-size: clamp(1.8rem,5vw,2.6rem); margin-top:24px; max-width:640px; }
.thanks p.lead { font-size:1.15rem; color: rgba(255,255,255,0.7); margin-top:16px; max-width:620px; }
.thanks__steps { list-style:none; margin:40px 0 0; padding:0; display:grid; gap:12px; max-width:620px; width:100%; text-align:left; }
.thanks__steps li { display:flex; align-items:center; gap:14px; border:1px solid rgba(255,255,255,0.22); background: rgba(27,27,27,0.55); padding:16px 18px; }
.thanks__steps b { flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:#fff; color:var(--bronze); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:600; }
.thanks__steps span { color:rgba(255,255,255,0.92); font-size:0.98rem; }

/* ---------- Página de gracias (header/footer de marca) ---------- */
.gracias {
  text-align:center; position:relative; background-color:var(--ink);
  /* Imagen de fondo (var --gbg) con capa oscura para legibilidad */
  background-image: linear-gradient(rgba(27,27,27,0.72), rgba(27,27,27,0.84)), var(--gbg, none);
  background-size:cover; background-position:center;
}
.gracias .container { display:flex; flex-direction:column; align-items:center; }
.gracias h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-top:24px; }
.gracias .lead { font-size:1.15rem; color:rgba(255,255,255,0.72); margin:16px auto 0; max-width:620px; }
.gracias .thanks__steps { margin:40px auto 0; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}