/* Relevo — home (index.html). Lo exclusivo de la portada, separado de ds.css el 28/09/2026 para que
   las páginas interiores no hereden reglas atadas a #idea, #proceso, #coches o #dudas. */

/* Hero */
.hero .contenedor{position:relative;min-height:900px}
.hero .la-e{width:1080px;right:-300px;top:150px;transform:rotate(-8deg);stroke:rgba(255,255,255,.14);stroke-width:28}
.hero-texto{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;width:560px;max-width:100%;padding-top:200px}
.hero-h1{display:flex;align-items:center;gap:12px;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-color)}
.hero-h1::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--on-color);box-shadow:0 0 0 5px rgba(255,255,255,.22)}
.hero-titulo{font-size:70px;line-height:.98;color:var(--on-color)}
.hero-entradilla{font-size:20px;line-height:30px;font-weight:500;color:var(--on-color)}
.hero-entradilla b{font-weight:800;color:var(--on-color)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.hero-bajar{position:absolute;left:var(--gutter);bottom:44px;z-index:2;display:inline-flex;align-items:center;gap:12px;min-height:var(--touch);
  font-size:14px;line-height:20px;font-weight:600;color:var(--on-color);text-decoration:none}
.hero-bajar:hover{color:var(--on-color)}
.hero-bajar span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55)}
.hero-bajar .icono{width:16px;height:16px}
.hero-visual{position:absolute;right:calc(var(--gutter) - 10px);bottom:0;z-index:1;height:780px;width:494px}
.hero-visual picture,.hero-visual img{height:100%;width:auto;max-width:none}
.hero-msgs{position:absolute;left:-116px;top:130px;z-index:2;display:flex;flex-direction:column;gap:12px;width:320px}

/* Mockups: etiqueta "Ejemplo" discreta junto al badge informativo del mock-head */

/* La idea */
#idea .contenedor{gap:48px}
.esquema{display:flex;align-items:stretch;gap:20px;width:100%;max-width:1040px;margin:0 auto}
.nodo{flex:1;display:flex;flex-direction:column;gap:6px;padding:26px 24px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.nodo-ficha{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:var(--brand-soft);color:var(--action);margin-bottom:8px}
.nodo-ficha .icono{width:22px;height:22px}
.nodo-etq{font-size:12px;line-height:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.nodo-txt{font-size:22px;line-height:28px;letter-spacing:-.03em}
.nodo--relevo{background:linear-gradient(160deg,var(--action) 0%,var(--brand-deep) 75%);border-color:transparent;box-shadow:0 18px 40px rgba(200,20,30,.28);color:var(--on-color)}
.nodo--relevo .iso{height:26px;width:48px;align-self:flex-start;color:var(--on-color);margin-bottom:8px}
.nodo--relevo .nodo-etq{color:var(--on-color)}
.nodo--relevo .nodo-txt{color:var(--on-color)}
.esquema-flecha{flex:none;align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brand-soft);color:var(--action)}
.esquema-flecha .icono{width:20px;height:20px}
.esquema-flecha .abajo{display:none}
.idea-texto{max-width:780px;margin:0 auto;text-align:center}

/* Elige tu camino */
#caminos .contenedor{gap:48px}
.caminos{display:grid;grid-template-columns:7fr 5fr;gap:24px}
.camino{position:relative;display:flex;flex-direction:column;gap:32px;min-height:440px;padding:48px 44px;border-radius:20px;overflow:hidden;color:var(--on-color)}
.camino-txt{position:relative;z-index:1;max-width:460px;font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1.2;letter-spacing:-.03em;color:var(--on-color)}
.camino-acciones{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:auto}
.camino-acciones .lnk{color:var(--on-color)}
.camino--vender{background:var(--brand-deep)}
.camino--vender .camino-foto{position:absolute;top:0;right:-18%;width:118%;max-width:none;height:100%}
.camino--vender .camino-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scaleX(-1)}
.camino--vender .camino-txt,.camino--vender .lnk{text-shadow:0 1px 3px rgba(21,23,28,.55),0 1px 16px rgba(21,23,28,.45)}
.camino--comprar{background:linear-gradient(160deg,var(--action) 0%,var(--brand-deep) 72%)}
.camino--comprar .la-e{width:420px;right:-110px;bottom:-120px;transform:rotate(-10deg);stroke:rgba(255,255,255,.22);stroke-width:30}

/* El proceso */
#proceso .contenedor{gap:72px}
.h2-proceso{font-size:clamp(36px,3.2vw + 18px,64px);line-height:1.04}
/* Tres bloques independientes que alternan texto e ilustración (zigzag) en vez de tres columnas */
.pasos{display:flex;flex-direction:column;gap:104px;width:100%;max-width:1040px;margin:0 auto}
.paso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.paso--invertido .paso-visual{order:-1}
.paso-texto{display:flex;flex-direction:column;gap:14px;max-width:460px}
.paso-titulo{font-size:clamp(28px,1.4vw + 16px,38px);line-height:1.1;letter-spacing:-.04em}
.paso-texto .body{font-size:18px;line-height:28px}
.paso-visual{display:flex;justify-content:center}
.paso-visual .mock{width:100%;max-width:460px}
.proceso-pie{display:flex;flex-direction:column;align-items:center;gap:16px}
.proceso-pie .lnk{color:var(--brand-text)}

/* Transparencia */
#transparencia .contenedor{gap:64px}
#transparencia .la-e{width:900px;right:-360px;top:-330px;transform:rotate(10deg);stroke:rgba(255,255,255,.10);stroke-width:30}
#transparencia .cabecera,#transparencia .datos,#transparencia .centro{position:relative;z-index:1}
#transparencia .hd{color:var(--on-color)}
.datos{display:grid;grid-template-columns:repeat(3,1fr)}
.dato{display:flex;flex-direction:column;gap:10px;padding:8px 36px}
.dato:first-child{padding-left:0}
.dato + .dato{border-left:1px solid rgba(255,255,255,.3)}
.dato .fig{font-size:clamp(48px,2.6vw + 30px,68px);line-height:1;white-space:nowrap;color:var(--on-color)}
.dato-titulo{font-size:20px;line-height:27px;letter-spacing:-.03em;margin-top:10px}
.dato p:not(.fig){font-size:16px;line-height:25px;font-weight:500;color:rgba(255,255,255,.88)}

/* Catálogo destacado */
#coches .contenedor{gap:56px}
#coches .cabecera{max-width:860px}

/* Dudas */
#dudas .contenedor{gap:28px;align-items:center}
#dudas .cabecera{max-width:680px}

/* Cierre */
.cierre{position:relative;overflow:hidden;min-height:640px;background:var(--brand-deep);color:var(--on-color)}
.cierre-foto{position:absolute;top:0;right:0;width:calc(100% - 300px);height:100%}
.cierre-foto img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.cierre::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand-deep) 30%,rgba(200,20,30,.78) 44%,rgba(200,20,30,.28) 62%,rgba(200,20,30,.08) 100%)}
.cierre .contenedor{position:relative;z-index:2}
.cierre-texto{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:560px;padding:150px 0 96px}
.cierre-titulo{font-size:clamp(44px,3.6vw + 20px,72px);line-height:1.04;color:var(--on-color)}
.cierre-texto p{font-size:20px;line-height:30px;font-weight:500;color:rgba(255,255,255,.92)}
.cierre-texto .btn{margin-top:8px}

@media (max-width:1199px){
  .hero-visual{height:680px;width:431px}
  .hero-msgs{left:-150px;top:110px;width:300px}
  .hero-titulo{font-size:62px}
}

@media (max-width:1179px){
  .hero .contenedor{min-height:0;display:flex;flex-direction:column}
  .hero .la-e{width:560px;right:-250px;top:600px;stroke:rgba(255,255,255,.16);stroke-width:34}
  .hero-texto{width:100%;max-width:640px;padding-top:112px;gap:20px}
  .hero-bajar{position:static;order:1;margin-top:8px;align-self:center}
  .hero-visual{position:relative;order:2;right:auto;bottom:auto;align-self:stretch;height:480px;width:auto;margin-top:16px}
  .hero-visual picture{position:absolute;right:-30px;bottom:0;height:460px}
  .hero-msgs{left:0;top:10px;width:260px;gap:8px}
}

@media (max-width:1023px){
  /* Tablet y móvil: cada bloque apilado, siempre el texto primero y la ilustración después */
  .pasos{gap:64px;max-width:560px}
  .paso{grid-template-columns:minmax(0,1fr);gap:24px}
  .paso--invertido .paso-visual{order:0}
  .paso-texto{max-width:none}
}

@media (max-width:767px){
  /* El radial empieza en --action (no --brand) para mantener AA en el texto pequeño sobre el hero */
  .hero{background:radial-gradient(120% 90% at 80% 20%,var(--action) 0%,var(--brand-deep) 55%,var(--brand-darker) 100%)}
  .hero-h1{font-size:12px;letter-spacing:.12em}
  .hero-titulo{font-size:clamp(32px,8.8vw,38px);line-height:1.04}
  .hero-entradilla{font-size:17px;line-height:26px}
  .h2-proceso{font-size:32px;line-height:1.08}
  .paso-titulo{font-size:26px;line-height:1.12}
  .paso-texto .body{font-size:16px;line-height:24px}
  .hero-ctas{flex-direction:column;gap:14px}
  .hero-ctas .btn{width:100%}
  .hero-msgs{width:240px}
  .msg{padding:10px 12px}
  .msg-ico{width:30px;height:30px}
  .msg-ico svg{height:11px;width:20px}
  .msg p{font-size:13px;line-height:18px}
  .mock-head{flex-wrap:wrap;row-gap:8px}
  .cerrada{flex-wrap:wrap;row-gap:8px}
  #idea .contenedor,#caminos .contenedor{gap:32px}
  #proceso .contenedor{gap:48px}
  #transparencia .contenedor{gap:24px}
  #coches .contenedor{gap:32px}
  .esquema{flex-direction:column;gap:8px}
  .esquema-flecha{align-self:center;width:32px;height:32px}
  .esquema-flecha .icono{width:16px;height:16px}
  .nodo{display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:2px;align-items:center;padding:18px 20px}
  .nodo-ficha,.nodo--relevo .iso{grid-row:span 2;margin:0}
  .nodo--relevo .iso{width:44px;height:24px;align-self:center}
  .nodo-txt{font-size:19px;line-height:25px}
  .esquema-flecha .derecha{display:none}
  .esquema-flecha .abajo{display:block}
  .caminos{grid-template-columns:1fr}
  .camino{padding:32px 24px}
  .camino--vender{min-height:420px}
  .camino--comprar{min-height:300px}
  .camino--comprar .la-e{width:300px;stroke-width:30}
  .camino-txt{font-size:21px;line-height:1.24;font-weight:700}
  .camino-acciones{flex-direction:column;align-items:flex-start}
  .camino-acciones .btn{width:100%}
  .proceso-pie .btn{width:100%}
  #transparencia .la-e{width:420px;right:-260px;top:-150px}
  .datos{grid-template-columns:1fr}
  .dato,.dato:first-child{padding:24px 0}
  .dato + .dato{border-left:0;border-top:1px solid rgba(255,255,255,.3)}
  #transparencia .centro .btn,#coches .centro .btn,#dudas .btn{width:100%}
  .cierre{min-height:0}
  .cierre-foto{top:auto;bottom:0;left:0;width:100%;height:420px}
  .cierre-foto img{object-position:62% 40%}
  .cierre::after{background:linear-gradient(180deg,var(--brand-deep) 0%,var(--brand-deep) 48%,rgba(200,20,30,.55) 64%,rgba(200,20,30,.12) 100%)}
  .cierre-titulo{font-size:36px;line-height:1.08}
  .cierre-texto{padding:56px 0 330px}
  .cierre-texto p{font-size:17px;line-height:26px}
  .cierre-texto .btn{width:100%}
  .site-footer{padding-bottom:140px}
}