/* ============================================================================
   HOGAR — LA CONTRATACIÓN ONLINE  ·  /seguro-de-hogar/#contratar   (24/09/2026)

   Hoja PROPIA del formulario de contratación de hogar (assets/js/hogar-alta.js),
   con un prefijo verificado libre en el repo:
     .hga-  el formulario (9 pasos, 3 tramos, 3 cierres)

   El simulador de la página (hogar-precio.js, prefijo .hg__) sigue inyectando
   su propio <style>: no se toca desde acá, y acá no se usa nada de él.

   No se apoya en el bloque compartido .calc__* (el rotulado «CAUCIÓN», que
   sostiene once verticales) ni en las clases de otras verticales (.apa-, .rta-,
   .rct-): cada vertical trae su hoja y no le pide nada a las otras. Lo único
   compartido es la cáscara del modal que ya viste praxis, vida, turismo y
   cosechadores (.calc-modal, .calc-modal__box--wide, .calc-modal__close,
   .calc-modal__skip, .field, .btn), que vive en styles.css y NO se toca
   (su ?v= está en ~80 páginas).

   Reglas de este formulario:
     · Primero el celular (375 px). Todo lo que se toca mide 44 px o más.
     · Nada puede pedir más ancho que la caja: sin eso, un celular chico tiene
       scroll horizontal y se corre el formulario entero (lección de turismo).
     · El precio de referencia va arriba de todos los pasos (lección de praxis:
       el precio se ve siempre) y se actualiza con lo que se contesta.
     · Los textos chicos (ayudas, notas, descripciones de cada opción) van en
       --ink-600 y no en --fg-3: sobre blanco, --fg-3 da 3,7:1 y no llega al
       4,5:1 que se pide para leer, justo donde van datos que deciden (el
       contenido fijo en $700.000, qué suma cada plan). --ink-600 da 6:1.
     · ⚠️ [hidden] pierde contra cualquier display de una clase (la hoja del
       navegador pesa menos que la del sitio). Pasó el 23/09 en el simulador
       (.hg__tramos) y pasaría acá con .btn (inline-flex), .hga-ayuda (block)
       y .hga-prog (grid). Por eso la primera regla es un [hidden] general
       para todo lo que está adentro del formulario.
   ============================================================================ */

/* ─── El [hidden] manda (ver arriba) ──────────────────────────────────────── */
.hga-box [hidden]{display:none !important;}

/* ─── La caja ──────────────────────────────────────────────────────────────── */
/* dvh: en iOS 92vh incluye la barra del navegador y el botón de abajo quedaba
   tapado. El vh queda de respaldo para los navegadores que no lo conocen. */
.hga-box{max-height:92vh;max-height:92dvh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.hga-box > *{min-width:0;}
.hga-box button{font-family:inherit;}   /* un <button> no hereda la letra del sitio */
/* La cruz de la cáscara mide 32 px: acá se lleva a 44 sin moverla de lugar. */
.hga-box .calc-modal__close{width:44px;height:44px;top:.45rem;right:.45rem;z-index:2;}

/* ─── La barra por tramos (modelo retiro-solicitud.js, BLOQUES) ────────────── */
.hga-prog{display:grid;gap:.35rem;margin:0 2.9rem 1rem 0;}
.hga-cnt{order:-1;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta-700);}
.hga-tramos{display:flex;gap:4px;align-items:center;}
.hga-seg{flex:1 1 0;height:4px;border-radius:4px;background:var(--ink-100);overflow:hidden;}
.hga-seg i{display:block;height:100%;border-radius:4px;background:var(--grad-brand-soft);transition:width .3s var(--ease);}
/* El tramo en curso, apenas más alto: el ojo lo encuentra sin leer. */
.hga-seg.is-aqui{height:6px;}
.hga-eta{font-size:.76rem;font-weight:600;color:var(--ink-600);line-height:1.4;}
.hga-eta:empty{display:none;}

/* ─── Lo que está contratando, siempre arriba ─────────────────────────────── */
.hga-cob{margin:0 0 1.1rem;padding:.8rem 1rem;border-radius:var(--r-md);color:#fff;
  background:linear-gradient(135deg,var(--magenta) 0%,var(--purple) 100%);}
.hga-cob__lbl{display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.85;}
.hga-cob__q{display:block;margin:.15rem 0 .1rem;font-size:clamp(1.2rem,5.2vw,1.5rem);font-weight:900;line-height:1.15;font-variant-numeric:tabular-nums;}
.hga-cob__q small{font-size:.8rem;font-weight:700;opacity:.9;}
.hga-cob__d{display:block;font-size:.82rem;line-height:1.45;opacity:.95;}
.hga-cob__ok{display:block;margin-top:.35rem;font-size:.78rem;font-weight:700;line-height:1.4;}
.hga-cob__ok::before{content:"✓ ";font-weight:900;}

/* ─── Títulos y textos ─────────────────────────────────────────────────────── */
/* .calc-modal__box h3 (de la cáscara) pesa más que una clase sola: por eso
   el título va con la caja adelante. */
.hga-box .hga-titulo{margin:0 0 .25rem;padding-right:0;font-size:1.25rem;font-weight:900;color:var(--fg-1);line-height:1.25;}
.hga-sub{margin:0 0 1.1rem;font-size:.9rem;color:var(--ink-600);line-height:1.5;}
.hga-h4{margin:1.3rem 0 .6rem;font-size:.95rem;font-weight:800;color:var(--fg-1);}
.hga-paso .hga-h4:first-child{margin-top:0;}
.hga-nota{margin:.7rem 0 0;font-size:.85rem;line-height:1.55;color:var(--ink-600);}
.hga-nota strong{color:var(--fg-1);}
.hga-nota--seria{padding:.75rem .9rem;border-radius:var(--r-md);background:var(--magenta-50);border-left:3px solid var(--magenta);color:var(--fg-2);}
.hga-paso > .hga-nota:first-child,.hga-paso > div > .hga-nota--seria{margin-bottom:1rem;}
.hga-ayuda{display:block;margin-top:.3rem;font-size:.78rem;font-weight:600;line-height:1.45;color:var(--ink-600);}
/* «En el simulador quedó en 120 m², el valor de fábrica»: es LA pregunta que
   el lead de Julia no tuvo. Se ve, no se susurra. */
.hga-ayuda--sim{margin:0 0 .6rem;padding:.55rem .75rem;border-radius:var(--r-sm);background:var(--magenta-50);
  border-left:3px solid var(--magenta);color:var(--magenta-700);font-size:.82rem;font-weight:700;}
.field .hga-ayuda--sim{margin:.45rem 0 0;}
.hga-ayuda--linea{margin:-.3rem 0 1rem;}
.hga-ayuda--linea:empty{display:none;}
.hga-err{margin:.9rem 0 0;padding:.7rem .9rem;border-radius:var(--r-md);font-size:.88rem;font-weight:700;line-height:1.45;
  background:#fff1f4;border:1px solid var(--magenta-300);color:var(--magenta-700);}
/* El aviso va PEGADO a la pregunta que falta (fallo() en hogar-alta.js):
   debajo de las opciones, al final del campo o debajo de la declaración.
   Hasta el 24/09 quedaba al pie del paso, con la pregunta fuera de la vista. */
.hga-opciones + .hga-err,.hga-cargas + .hga-err,.field > .hga-err{margin:.55rem 0 0;}
.hga-carga--decl + .hga-err{margin:-.7rem 0 1.25rem;}

/* ─── Las preguntas: un fieldset por pregunta ─────────────────────────────── */
.hga-grupo{margin:0 0 1.25rem;padding:0;border:0;min-width:0;}
.hga-q{display:block;float:left;width:100%;margin:0 0 .55rem;padding:0;font-size:.95rem;font-weight:800;line-height:1.35;color:var(--fg-1);}
/* float + clear: el truco que hace que el <legend> respete su margen en
   Safari (sin él, la primera opción queda pegada a la pregunta). El clear va
   en TODOS los hermanos y no sólo en el siguiente: si el que sigue está
   escondido (la ayuda de depto o country), el resto se montaba al costado
   de la pregunta y desbordaba la caja (medido a 375 px el 24/09). */
.hga-q ~ *{clear:both;}
.hga-grupo > .hga-ayuda{margin:0 0 .55rem;}
.hga-grupo > .hga-ayuda--sim{margin:0 0 .6rem;}
.hga-grupo > .field{margin:.75rem 0 0;}

/* Opciones tipo tarjeta (radios). */
.hga-opciones{display:grid;gap:.5rem;grid-template-columns:1fr;margin:0;}
.hga-opcion{display:flex;gap:.7rem;align-items:flex-start;min-height:48px;padding:.72rem .9rem;cursor:pointer;
  border:2px solid var(--border-1);border-radius:var(--r-md);background:#fff;min-width:0;
  transition:border-color .15s var(--ease),background .15s var(--ease);}
.hga-opcion:hover{border-color:var(--magenta-300);}
.hga-opcion input{flex:0 0 auto;width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--magenta);}
.hga-opcion span{flex:1 1 auto;min-width:0;}
.hga-opcion b{display:block;font-size:.95rem;font-weight:800;line-height:1.25;color:var(--fg-1);overflow-wrap:anywhere;}
.hga-opcion small{display:block;margin-top:.12rem;font-size:.8rem;line-height:1.4;color:var(--ink-600);}
.hga-opcion:has(input:checked){border-color:var(--magenta);background:var(--magenta-50);}
.hga-opcion:has(input:checked) b{color:var(--magenta-700);}
/* El foco, punteado y en violeta: con el link del CRM el foco cae solo en
   «Es mía» al abrir, y el anillo magenta lleno se confundía con una opción
   ya elegida (borde magenta lleno y fondo rosado). */
.hga-opcion:has(input:focus-visible){outline:2px dashed var(--purple);outline-offset:3px;}
/* Las cortas (Sí / No, el piso, la antigüedad): una fila que se parte sola. */
.hga-opciones--cortas{display:flex;flex-wrap:wrap;}
.hga-opciones--cortas .hga-opcion{flex:1 1 auto;align-items:center;padding:.6rem .85rem;}
.hga-opciones--cortas .hga-opcion input{margin:0;}
.hga-opciones--cortas .hga-opcion b{white-space:nowrap;}
/* Las dos tarjetas grandes de «Qué hacemos?». */
.hga-opcion--grande{padding:1rem 1.05rem;}
.hga-opcion--grande input{width:20px;height:20px;margin-top:.1rem;}
.hga-opcion--grande b{font-size:1.05rem;}
.hga-opcion--grande small{margin-top:.25rem;font-size:.86rem;line-height:1.5;color:var(--fg-2);}
/* Los planes, con su precio de referencia a la derecha. */
.hga-opcion--plan{align-items:center;}
.hga-opcion--plan input{margin:0;}
.hga-opcion .hga-opcion__precio{flex:0 0 auto;margin-left:auto;text-align:right;font-size:1rem;font-weight:900;line-height:1.15;
  color:var(--fg-1);font-variant-numeric:tabular-nums;white-space:nowrap;}
.hga-opcion__precio small{font-size:.7rem;font-weight:700;margin-top:.1rem;}
.hga-opcion--plan:has(input:checked) .hga-opcion__precio{color:var(--magenta-700);}
.hga-reco{display:inline-block;margin:.25rem 0 0;padding:.12rem .5rem;border-radius:var(--r-pill);background:var(--magenta);color:#fff;
  font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.5;vertical-align:.1em;}

/* Casillas (medidas, extras, objetos) y la declaración. */
.hga-cargas{display:grid;gap:.5rem;}
.hga-carga{display:flex;gap:.7rem;align-items:flex-start;min-height:48px;padding:.7rem .85rem;cursor:pointer;
  border:1px solid var(--border-1);border-radius:var(--r-md);background:#fff;font-size:.9rem;line-height:1.5;color:var(--fg-2);min-width:0;}
.hga-carga input{flex:0 0 auto;width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--magenta);}
.hga-carga span{flex:1 1 auto;min-width:0;}
.hga-carga small{display:block;margin-top:.12rem;font-size:.8rem;line-height:1.45;color:var(--ink-600);}
.hga-carga:has(input:checked){border-color:var(--magenta);background:var(--magenta-50);color:var(--fg-1);}
.hga-carga:has(input:focus-visible){outline:2px dashed var(--purple);outline-offset:3px;}
.hga-carga--decl{margin:0 0 1.25rem;font-weight:700;color:var(--fg-1);}

/* La pregunta que falta, marcada donde está (con aria-invalid en el campo).
   El borde punteado no se confunde con una opción elegida. */
.hga-falta > .hga-q,.field.hga-falta > label{color:var(--magenta-700);}
.hga-falta .hga-opcion,.hga-falta .hga-carga,.hga-carga--decl.hga-falta{border-color:var(--magenta);border-style:dashed;}
.hga-box .field.hga-falta input,.hga-box .field.hga-falta select{border-color:var(--magenta);background:#fff1f4;}

/* «Qué es» de la persona expuesta políticamente, plegado. */
.hga-que{margin:.5rem 0 0;font-size:.85rem;line-height:1.55;color:var(--fg-2);}
.hga-que summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700;color:var(--magenta-700);
  text-decoration:underline;text-underline-offset:3px;list-style:none;}
.hga-que summary::-webkit-details-marker{display:none;}
.hga-que summary::before{content:"▸";margin-right:.35rem;text-decoration:none;}
.hga-que[open] summary::before{content:"▾";}
.hga-que p{margin:.1rem 0 0;padding:.7rem .85rem;border-radius:var(--r-sm);background:var(--ink-50);}

/* ─── Campos ───────────────────────────────────────────────────────────────── */
.hga-grid{display:grid;gap:0 .9rem;grid-template-columns:1fr;}
.hga-grid > *{min-width:0;}
/* Localidad arriba a todo el ancho; CP y provincia de a dos. */
.hga-grid--3{grid-template-columns:1fr 1fr;}
.hga-grid--3 > :first-child{grid-column:1 / -1;}
/* 7.5rem y no 6.5: con 6.5 el ejemplo «1234 o s/n» se cortaba en «s/r» a 375 px. */
.hga-grid--calle{grid-template-columns:minmax(0,1fr) 7.5rem;}
.hga-box .field label small{font-weight:600;color:var(--ink-600);}
/* La suma del edificio: «$ [220] millones», el número grande y en el medio. */
.hga-suma{display:flex;align-items:center;gap:.5rem;}
.hga-suma > span{flex:0 0 auto;font-weight:800;color:var(--fg-2);}
.hga-box .hga-suma input{flex:1 1 auto;min-width:0;max-width:11rem;font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;}
/* La caja de la suma termina en una nota sin margen abajo: sin esto, «Qué
   plan?» quedaba pegado a la nota del consorcio, como su último renglón. */
#hgaEdificioBox{margin-bottom:1.25rem;}

/* ─── La confirmación: el resumen en renglones y el botón con la frase entera ─ */
.hga-conf{margin:0 0 1rem;padding:.9rem 1rem;border-radius:var(--r-md);background:#fff;border:2px solid var(--magenta-300);}
.hga-conf__t{margin:0 0 .6rem;font-size:.95rem;font-weight:800;color:var(--fg-1);}
.hga-conf dl{margin:0;display:grid;gap:.35rem;}
.hga-conf dl > div{display:grid;grid-template-columns:1fr;gap:.15rem .8rem;padding:.45rem 0;border-top:1px solid var(--border-1);}
.hga-conf dt{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-600);}
.hga-conf dd{margin:0;font-size:.9rem;line-height:1.5;color:var(--fg-2);overflow-wrap:anywhere;}
.hga-conf dd strong{color:var(--fg-1);}
/* «cambiar»: chico a la vista, 44 px al dedo (los márgenes negativos hacen
   que el área de toque crezca sin agrandar el renglón). */
.hga-cambiar{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;min-height:44px;margin:-.75rem -.5rem;padding:0 .5rem;
  border:0;background:none;cursor:pointer;font-size:.74rem;font-weight:800;letter-spacing:0;text-transform:none;
  color:var(--magenta-700);text-decoration:underline;text-underline-offset:3px;}
.hga-cambiar:hover{color:var(--magenta);}
.hga-conf__que{font-size:.88rem;line-height:1.6;color:var(--fg-2);}
.hga-conf__que p{margin:0 0 .6rem;}
.hga-conf__que strong{color:var(--fg-1);}
/* «Todavía no»: secundario a propósito. El primario de abajo (en .hga-nav) es
   el que dice la frase entera. */
.hga-box .hga-pausa{display:block;width:auto;min-height:44px;margin:.6rem auto 0;padding:.4rem 1rem;font-size:.9rem;font-weight:700;color:var(--fg-2);}

/* ─── Navegación ───────────────────────────────────────────────────────────── */
.hga-nav{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:1.3rem;}
.hga-nav .calc-modal__skip{flex:0 0 auto;width:auto;min-height:44px;margin:0;padding:0 .3rem;}
/* .btn trae white-space:nowrap: «Sí, quiero contratarla ›» no entra en 320 px
   al lado de «Atrás». Se deja partir y se centra. */
.hga-nav .btn{flex:0 1 auto;min-height:48px;justify-content:center;text-align:center;white-space:normal;line-height:1.25;}
.hga-nav .btn[disabled]{opacity:.6;cursor:default;animation:none;transform:none;}
/* «Prefiero seguir por WhatsApp»: un <a href="wa.me"> de verdad, así main.js
   lo cuenta como salida «wa». Chico, pero con su área de toque. */
.hga-wa{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;margin:.5rem 0 0;
  font-size:.86rem;font-weight:700;color:var(--fg-2);text-decoration:underline;text-underline-offset:3px;}
.hga-wa::before{content:"";flex:0 0 auto;width:.55rem;height:.55rem;border-radius:50%;background:var(--whatsapp);}
.hga-wa:hover{color:var(--fg-1);}
.hga-priv{margin:.3rem 0 0;font-size:.76rem;line-height:1.45;color:var(--ink-600);text-align:center;}
/* «Condiciones»: chico a la vista, 44 px al dedo sin agrandar el renglón. */
.hga-priv a{display:inline-flex;align-items:center;min-height:44px;margin:-.85rem 0;color:var(--ink-600);text-decoration:underline;text-underline-offset:2px;}

/* ─── Los cierres: cotización, confirmada, en pausa ───────────────────────── */
.hga-fin{text-align:center;padding:.4rem 0 0;}
.hga-fin h3{margin:.5rem 0 .3rem;padding-right:0;font-size:1.3rem;font-weight:900;color:var(--fg-1);}
.hga-fin h3:focus{outline:none;}
.hga-fin__ico{width:56px;height:56px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--magenta) 0%,var(--purple) 100%);}
.hga-fin.is-pausa .hga-fin__ico{background:var(--ink-500);}
.hga-fin__resumen{margin:1rem 0;padding:.85rem 1rem;border-radius:var(--r-md);background:var(--magenta-50);text-align:left;
  font-size:.9rem;line-height:1.55;color:var(--fg-2);overflow-wrap:anywhere;}
.hga-fin__resumen p{margin:.15rem 0;}
.hga-fin__pasos{text-align:left;font-size:.9rem;line-height:1.55;color:var(--fg-2);}
.hga-fin__pasos p{margin:.45rem 0;}
.hga-fin .hga-nota--seria{text-align:left;}
.hga-fin__actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.1rem;}
.hga-fin__actions .btn{flex:1 1 14rem;min-height:48px;justify-content:center;text-align:center;white-space:normal;line-height:1.25;}
/* «Mejor ya quiero contratarla»: secundario, blanco con borde de marca. */
.hga-btn2{background:#fff;color:var(--magenta-700);border-color:var(--magenta-300);}
.hga-btn2:hover{background:var(--magenta-50);border-color:var(--magenta);}
.hga-fin > .calc-modal__skip{min-height:44px;margin-top:.5rem;}

/* ─── Pantalla chica: más lugar para el formulario ────────────────────────── */
@media (max-width:479px){
  /* La capa casi de borde a borde: en 375 px cada rem de margen es una
     palabra menos por renglón. */
  #hgaModal{padding:.5rem;}
  .hga-box{padding:1.3rem 1rem 1.1rem;}
  .hga-cob{padding:.7rem .85rem;}
}

@media (min-width:640px){
  .hga-opciones--2{grid-template-columns:1fr 1fr;}
  .hga-grid{grid-template-columns:1fr 1fr;}
  .hga-grid--3{grid-template-columns:1.4fr .8fr 1fr;}
  .hga-grid--3 > :first-child{grid-column:auto;}
  .hga-grid--calle{grid-template-columns:minmax(0,1fr) 8rem;}
  .hga-conf dl > div{grid-template-columns:10rem 1fr;}
  .hga-conf dt{align-items:flex-start;flex-direction:column;justify-content:flex-start;gap:0;}
  .hga-cambiar{margin:-.55rem -.5rem -.75rem;}
}

@media (prefers-reduced-motion:reduce){
  .hga-seg i{transition:none;}
  .hga-nav .btn{animation:none;}
}