/* AlojaEquipo — hoja de estilos única. Portada a todo color en ultramar, tipografía redonda y pesada, acento menta. */


@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  --hormigon: #F5F6FB;
  --papel: #FFFFFF;
  --tinta: #141B4D;
  --suave: #4D5580;
  --linea: #D5D9EE;
  --obra: #5CF0B5;
  --obra-oscuro: #3FDDA0;
  --pino: #2535D8;
  --pino-claro: #C9D0FF;
  --banda-fondo: #141B4D;
  --banda-texto: #FFFFFF;
  --radio: 14px;
  --fuente-titulo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-texto: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-titulo: 800;
  --error: #B3261E;
  --grosor: 1px;
  --ancho: 1180px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--hormigon);
  color: var(--tinta);
  font: 400 17px/1.6 var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); margin: 0; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.pino :focus-visible, .pie :focus-visible { outline-color: var(--obra); }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.salto { position: absolute; left: -999px; top: 8px; background: var(--obra); padding: 8px 14px; z-index: 100; }
.salto:focus { left: 8px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-block; font: 600 1rem/1 var(--fuente-texto); text-decoration: none; cursor: pointer;
  padding: 15px 22px; border-radius: var(--radio); border: var(--grosor) solid var(--tinta);
  background: var(--obra); color: var(--tinta); transition: background-color .15s;
}
.btn:hover { background: var(--obra-oscuro); }
.btn.secundario { background: transparent; }
.btn.secundario:hover { background: var(--tinta); color: var(--papel); }
.pino .btn { border-color: var(--obra); }
.pino .btn.secundario { color: var(--papel); border-color: var(--pino-claro); }
.pino .btn.secundario:hover { background: var(--papel); color: var(--pino); border-color: var(--papel); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--hormigon); border-bottom: var(--grosor) solid var(--tinta); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: var(--peso-titulo) 1.7rem/1 var(--fuente-titulo); }
.logo svg { width: 30px; height: 30px; }
.logo-fondo { fill: var(--obra); stroke: var(--tinta); stroke-width: 2; }
.logo-trazo { fill: none; stroke: var(--tinta); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pie .logo-fondo { stroke: var(--papel); }
.menu { display: none; gap: 26px; }
.menu a { text-decoration: none; font-weight: 500; font-size: .98rem; }
.menu a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.cabecera .btn { padding: 11px 16px; font-size: .95rem; }

/* ---------- Portada ---------- */
.portada { padding: 44px 0 56px; }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.portada h1 { font-size: clamp(2.7rem, 6.4vw, 4.5rem); line-height: 1.04; margin-bottom: 22px; }
.portada .lead { font-size: 1.2rem; max-width: 34em; color: var(--suave); margin-bottom: 28px; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* El plano: hoja de dibujo con cajetín */
.hoja { background: var(--papel); border: var(--grosor) solid var(--tinta); border-radius: var(--radio); }
.hoja-controles { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: end; padding: 16px 18px; border-bottom: var(--grosor) solid var(--tinta); }
.control > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--suave); }
.paso { display: flex; align-items: center; border: var(--grosor) solid var(--tinta); border-radius: var(--radio); background: var(--hormigon); }
.paso button { width: 44px; height: 44px; font: 600 1.5rem/1 var(--fuente-texto); background: transparent; border: 0; cursor: pointer; color: var(--tinta); }
.paso button:hover:not(:disabled) { background: var(--obra); }
.paso button:disabled { opacity: .35; cursor: not-allowed; }
.paso output { min-width: 56px; text-align: center; font: var(--peso-titulo) 1.7rem/1 var(--fuente-titulo); }
.segmento { display: inline-flex; border: var(--grosor) solid var(--tinta); border-radius: var(--radio); overflow: hidden; }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento label { padding: 11px 14px; font-weight: 600; font-size: .95rem; cursor: pointer; background: var(--hormigon); }
.segmento label + input + label, .segmento input + label + input + label { border-left: var(--grosor) solid var(--tinta); }
.segmento input:checked + label { background: var(--tinta); color: var(--papel); }
.segmento input:focus-visible + label { outline: 3px solid var(--obra); outline-offset: -5px; }

.plano { padding: 14px; }
.plano svg { width: 100%; height: auto; }
.plano .pared { fill: none; stroke: var(--tinta); stroke-width: 3; }
.plano .pared-fina { fill: none; stroke: var(--tinta); stroke-width: 1.5; }
.plano .puerta { stroke: var(--papel); stroke-width: 5; }
.plano .etq { font: 600 11px var(--fuente-texto); fill: var(--suave); }
.plano .cama { fill: var(--obra); stroke: var(--tinta); stroke-width: 1.6; animation: aparece .25s ease-out; }
.plano .almohada { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.2; }
@keyframes aparece { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.plano .cama, .plano .almohada { transform-box: fill-box; transform-origin: center; }

.cajetin { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--grosor) solid var(--tinta); }
.cajetin > div { padding: 12px 14px; }
.cajetin > div + div { border-left: var(--grosor) solid var(--tinta); }
.cajetin dt { font-size: .8rem; font-weight: 600; color: var(--suave); line-height: 1.3; }
.cajetin dd { margin: 2px 0 0; font: var(--peso-titulo) 2.2rem/1 var(--fuente-titulo); }
.hoja-pie { border-top: var(--grosor) solid var(--tinta); padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; font-size: .92rem; color: var(--suave); }
.hoja-pie a { font-weight: 600; color: var(--tinta); }

/* ---------- Banda de garantías ---------- */
.banda { background: var(--banda-fondo); color: var(--banda-texto); }
.banda ul { list-style: none; margin: 0; padding: 22px 0; display: grid; gap: 14px 40px; }
.banda li { font: var(--peso-titulo) 1.35rem/1.2 var(--fuente-titulo); letter-spacing: .01em; padding-left: 18px; border-left: 4px solid var(--obra); }

/* ---------- Secciones ---------- */
.seccion { padding: 72px 0; }
.seccion h2 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; margin-bottom: 18px; max-width: 18em; }
.seccion .intro { font-size: 1.12rem; color: var(--suave); max-width: 38em; margin-bottom: 38px; }

/* Cómo funciona: secuencia real */
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; border-top: var(--grosor) solid var(--tinta); }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 64px 1fr; gap: 6px 14px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.pasos li::before { content: counter(paso); font: var(--peso-titulo) 2.8rem/.95 var(--fuente-titulo); color: var(--tinta); grid-row: span 2; }
.pasos h3 { font-size: 1.55rem; line-height: 1.1; }
.pasos p { margin: 0; color: var(--suave); max-width: 40em; }

/* Condiciones */
.condiciones-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.condiciones h3 { font-size: 1.7rem; margin-bottom: 14px; }
.lista-doc { list-style: none; margin: 0 0 18px; padding: 0; border-top: var(--grosor) solid var(--tinta); }
.lista-doc li { padding: 13px 0 13px 34px; border-bottom: 1px solid var(--linea); position: relative; }
.lista-doc li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 15px; height: 9px; border-left: 3px solid var(--tinta); border-bottom: 3px solid var(--tinta); transform: rotate(-45deg); }
.lista-doc small { display: block; color: var(--suave); font-size: .9rem; line-height: 1.4; margin-top: 2px; }
.nota { font-size: .92rem; color: var(--suave); }

.albaran { background: var(--papel); border: var(--grosor) solid var(--tinta); border-radius: var(--radio); padding: 20px; }
.albaran label { display: block; font-weight: 600; margin-bottom: 8px; }
.entrada-euro { display: flex; align-items: center; border: var(--grosor) solid var(--tinta); border-radius: var(--radio); background: #fff; margin-bottom: 18px; }
.entrada-euro input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 14px; font: var(--peso-titulo) 1.6rem/1 var(--fuente-titulo); color: var(--tinta); }
.entrada-euro input:focus-visible { outline: 0; }
.entrada-euro:focus-within { outline: 3px solid var(--obra); outline-offset: 2px; }
.entrada-euro span { padding: 0 14px; font-weight: 600; color: var(--suave); }
.albaran table { width: 100%; border-collapse: collapse; }
.albaran th, .albaran td { padding: 10px 0; text-align: left; border-top: 1px dashed var(--linea); font-weight: 400; }
.albaran td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.albaran tr.total th, .albaran tr.total td { border-top: var(--grosor) solid var(--tinta); padding-top: 14px; font: var(--peso-titulo) 1.6rem/1.1 var(--fuente-titulo); }
.albaran .nota { margin: 14px 0 0; }

/* Propietarios */
.pino { background: var(--pino); color: var(--papel); }
.pino .intro { color: var(--pino-claro); }
.garantias { display: grid; gap: 0; margin: 0 0 34px; border-top: 1px solid var(--pino-claro); }
.garantias > div { padding: 20px 0; border-bottom: 1px solid rgba(169, 199, 185, .45); }
.garantias dt { font: var(--peso-titulo) 1.6rem/1.1 var(--fuente-titulo); margin-bottom: 4px; }
.garantias dd { margin: 0; color: var(--pino-claro); max-width: 34em; }

/* Inmobiliarias */
.socias { padding: 44px 0; border-top: var(--grosor) solid var(--tinta); border-bottom: var(--grosor) solid var(--tinta); }
.socias .contenedor { display: grid; gap: 18px; align-items: center; }
.socias h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); line-height: 1.12; margin: 0; max-width: 18em; }
.socias p { margin: 0; color: var(--suave); max-width: 38em; }

/* Preguntas */
.faq { max-width: 820px; border-top: var(--grosor) solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font: var(--peso-titulo) 1.4rem/1.15 var(--fuente-titulo); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 600 1.8rem/1 var(--fuente-texto); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 20px; margin: 0; color: var(--suave); max-width: 40em; }

/* Formulario */
.solicitud { background: var(--papel); border-top: var(--grosor) solid var(--tinta); }
.solicitud-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.contacto-directo { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea); color: var(--suave); }
.contacto-directo a { font-weight: 600; color: var(--tinta); }
.formulario { display: grid; gap: 16px; }
.formulario .segmento { width: 100%; }
.formulario .segmento label { flex: 1; text-align: center; }
.campos { display: grid; gap: 16px; }
.campo label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.campo input, .campo textarea {
  width: 100%; font: 400 1rem/1.4 var(--fuente-texto); color: var(--tinta);
  padding: 12px 13px; border: var(--grosor) solid var(--tinta); border-radius: var(--radio); background: #fff;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--obra); outline-offset: 1px; }
.campo [hidden], .campo[hidden] { display: none; }
.trampa { position: absolute; left: -5000px; height: 0; overflow: hidden; }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--suave); }
.acepto input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--tinta); flex: none; }
.acepto a { color: var(--tinta); }
.estado { min-height: 1.4em; margin: 0; font-weight: 600; }
.estado.ok { color: var(--pino); }
.estado.error { color: var(--error); }

/* Pie */
.pie { background: var(--tinta); color: var(--papel); padding: 44px 0 36px; font-size: .95rem; }
.pie-rejilla { display: grid; gap: 28px; }
.pie .logo { color: var(--papel); margin-bottom: 10px; }
.pie p { margin: 0 0 6px; color: #C3C8C4; }
.pie nav { display: flex; flex-direction: column; gap: 8px; }
.pie a { color: var(--papel); }

/* ---------- Páginas legales ---------- */
.legal { padding: 52px 0 80px; }
.legal .texto { max-width: 760px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.08; margin-bottom: 26px; }
.legal h2 { font-size: 1.7rem; margin: 34px 0 8px; }
.legal li { margin-bottom: 6px; }
.aviso-borrador { background: var(--obra); border: var(--grosor) solid var(--tinta); border-radius: var(--radio); padding: 12px 16px; font-weight: 600; margin-bottom: 28px; }

/* ---------- Pantallas anchas ---------- */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .banda ul { grid-template-columns: repeat(3, 1fr); }
  .garantias { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .campos.dos { grid-template-columns: 1fr 1fr; }
  .pasos li { grid-template-columns: 96px 1fr; padding: 26px 0; }
  .pasos li::before { font-size: 3.6rem; }
  .pie-rejilla { grid-template-columns: 1.4fr 1fr; }
  .socias .contenedor { grid-template-columns: 1fr auto; column-gap: 48px; }
  .socias .btn { grid-row: span 2; }
}
@media (min-width: 960px) {
  .menu { display: flex; }
  .portada { padding: 64px 0 80px; }
  .portada-rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .condiciones-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .solicitud-rejilla { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plano .cama { animation: none; }
  .btn { transition: none; }
}

/* ---------- Ajustes de color y forma ---------- */

body { font-size: 16.5px; line-height: 1.65; word-spacing: .08em; }
h1, h2, h3 { word-spacing: 0; }
h1, h2, h3 { letter-spacing: -0.025em; }

/* Botones: menta sin borde visible; los secundarios llevan contorno */
.btn { border-color: var(--obra); }
.btn:hover { border-color: var(--obra-oscuro); }
.btn.secundario { border-color: var(--tinta); }
.pino .btn.secundario, .portada .btn.secundario { color: #fff; border-color: rgba(255, 255, 255, .65); }
.pino .btn.secundario:hover, .portada .btn.secundario:hover { background: #fff; color: var(--pino); border-color: #fff; }

/* Cabecera y portada: mismo bloque de color */
.cabecera { background: var(--pino); border-bottom: 0; color: #fff; }
.logo { color: #fff; }
.menu a { color: #fff; }
.cabecera .logo-fondo { stroke: var(--pino); }

.portada { background: var(--pino); color: #fff; padding: 40px 0 84px; }
.portada h1 { color: #fff; font-size: clamp(2.5rem, 6vw, 4.2rem); line-height: 1.03; }
.portada .lead { color: var(--pino-claro); }

/* La hoja del asistente flota sobre el color */
.hoja { color: var(--tinta); border: 0; box-shadow: 0 28px 60px -24px rgba(8, 12, 70, .6); }
.hoja-controles, .cajetin, .hoja-pie { border-color: var(--linea); }
.cajetin > div + div { border-color: var(--linea); }
.paso, .segmento { border-color: var(--tinta); }

.seccion h2 { line-height: 1.08; }
.pasos li::before { color: var(--pino); }
.albaran { border-color: var(--linea); }
.socias { border-color: var(--linea); }
.solicitud { border-top: 0; }

.cabecera .btn.secundario { color: #fff; border-color: rgba(255, 255, 255, .65); }
.cabecera .btn.secundario:hover { background: #fff; color: var(--pino); border-color: #fff; }

/* ---------- Franja para cambiar de público ---------- */
.audiencias { background: var(--tinta); color: #fff; font-size: .88rem; }
.audiencias .contenedor { display: flex; align-items: center; gap: 4px 20px; min-height: 40px; }
.audiencias span { color: var(--pino-claro); }
.audiencias a { color: #fff; text-decoration: none; padding: 9px 2px; border-bottom: 2px solid transparent; }
.audiencias a:hover { border-bottom-color: var(--pino-claro); }
.audiencias a[aria-current="page"] { border-bottom-color: var(--obra); font-weight: 600; }
.audiencias :focus-visible { outline-color: var(--obra); }

/* ---------- Tarjetas de la portada de propietarios e inmobiliarias ---------- */
.albaran-hoja { padding: 24px; }
.hoja-titulo { font-size: 1.6rem; line-height: 1.1; margin: 0 0 14px; max-width: none; color: var(--tinta); }
.tabla-cero { width: 100%; border-collapse: collapse; }
.tabla-cero th, .tabla-cero td { padding: 11px 0; text-align: left; border-top: 1px dashed var(--linea); font-weight: 400; }
.tabla-cero td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tabla-cero tr.total th, .tabla-cero tr.total td { border-top: var(--grosor) solid var(--tinta); padding-top: 14px; font: var(--peso-titulo) 1.5rem/1.1 var(--fuente-titulo); }
.albaran-hoja .nota { margin: 16px 0 0; color: var(--suave); }
.flujo { list-style: none; margin: 0; padding: 0; counter-reset: flujo; }
.flujo li { counter-increment: flujo; position: relative; padding: 14px 0 14px 46px; border-top: 1px solid var(--linea); color: var(--suave); }
.flujo li:first-child { border-top: 0; }
.flujo li::before { content: counter(flujo); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--pino); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .95rem; }
.flujo strong { color: var(--tinta); }

/* Título largo en portada */
.portada h1.h1-largo { font-size: clamp(2.3rem, 5vw, 3.7rem); }

/* Garantías sobre fondo claro (propietarios) */
.claro { background: var(--papel); border-top: var(--grosor) solid var(--linea); border-bottom: var(--grosor) solid var(--linea); }
.claro .garantias { border-top-color: var(--tinta); }
.claro .garantias > div { border-bottom-color: var(--linea); }
.claro .garantias dd { color: var(--suave); }