/* ============================================================================
   Estilos de las calculadoras de La CasaMía.

   Portado del artefacto de arriendo, que resultó ser un superconjunto ESTRICTO
   del de venta: de las 300 líneas de CSS de venta, las 300 ya estaban aquí. Por
   eso hay una sola hoja para los dos productos y no dos casi iguales.

   Los tokens de color coinciden con el Manual de Identidad
   (socialmedia/brand/tokens.json): navy #24305E, tinta #0B2986, acento #FFA522,
   tipografía Poppins — la misma que usa lacasamia.co.

   REGLA PARA LA FASE 2: nada de CSS Grid en la plantilla de cotización.
   WeasyPrint soporta flexbox desde la v61 pero NO Grid, y el PDF adjunto sale de
   esa misma plantilla. Aquí, en la calculadora, Grid es libre.
   ============================================================================ */

  :root{
    --header-bg:#24305E;
    --bg:#F4F6FA;
    --surface:#FFFFFF;
    --surface-alt:#F7F8FB;
    --border:#DEE2EA;
    --text:#24305E;
    /* Contraste medido (WCAG AA pide 4.5:1 en texto normal), revisión del 2026-09-22.

       --text-muted era #5C667A: 5.34 sobre el fondo y 5.77 sobre blanco, bien; pero 4.36 sobre
       la cabecera de categoría #D6E0F5, donde vive `.cat-desc`. #555F72 lo sube a 4.85 ahí sin
       oscurecer el resto de forma perceptible.

       --text-faint era #8E97A8 y NO llegaba a 4.5 sobre NINGUNO de los tres fondos del sistema:
       2.72 / 2.77 / 2.94. Lo usaban 37 elementos. El grave: `.item.is-off .item-desc`, o sea la
       descripción de un servicio no seleccionado — y en venta seis de los doce arrancan
       deseleccionados, así que la mitad del catálogo, el texto que hay que leer para decidir si
       activarlo, estaba a 2.94:1. #646E82 da 4.74 / 4.83 / 5.13.

       "Desactivado" y "poco legible" no son lo mismo: `is-off` sigue distinguiéndose, pero
       ahora por un gris que se puede leer. */
    --text-muted:#555F72;
    --text-faint:#646E82;
    --primary:#24305E;
    --primary-2:#0B2986;
    --primary-soft:#E4E9F7;
    --category-head-bg:#D6E0F5;
    --accent:#FFB624;
    --accent-text:#8F5A00;
    --accent-strong:#FFA522;
    --accent-soft:#FFF4DD;
    --celeste:#BFE5FB;
    /* 4.19 sobre --success-soft a 11.2px/600, justo por debajo del umbral. #136B41 da 5.86. */
    --success:#136B41;
    --success-soft:#E6F6EE;
    --success-dot:#2BA86B;
    --info-text:#0B2986;
    --info-soft:#BFE5FB;
    --shadow: 0 8px 30px rgba(36,48,94,.08);
    --radius-l: 24px;
    --radius-m: 16px;
    --radius-s: 10px;

    /* Escala de espaciado.

       Medido en la revisión del 2026-09-22: la página tenía 25 valores distintos de
       padding/margin y 13 de gap, en dos familias que no se hablaban (la de 4 — 4, 8, 12, 16,
       24 — y una impar — 3, 7, 9, 11, 14, 18, 22, 26). Los radios, en cambio, eran cuatro y
       estaban bien gobernados: la disciplina existía, pero no en el espacio.

       Estos seis gobiernan el RITMO VERTICAL entre secciones y tarjetas, que es donde se nota.
       Los paddings internos de cada componente siguen a su aire; unificarlos todos es otra
       pasada y otro riesgo. */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 24px;
    --esp-6: 32px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --header-bg:#1B2340;
      --bg:#141A2A;
      --surface:#1E2740;
      --surface-alt:#232C48;
      --border:#37406B;
      --text:#F3F5FA;
      --text-muted:#AAB3CC;
      /* 4.26 sobre --surface y 3.96 sobre --surface-alt: los dos por debajo de 4.5. */
      --text-faint:#939CB8;
      --primary:#8DA4EE;
      --primary-2:#B7C6F5;
      --primary-soft:#28325A;
      --category-head-bg:#32406F;
      --accent:#FFB624;
      --accent-text:#FFD37A;
      --accent-strong:#FFA522;
      --accent-soft:#3B2E12;
      --celeste:#7FB9DE;
      --success:#6FDDA0;
      --success-soft:#173425;
      --success-dot:#3ECB84;
      --info-text:#9DC3F2;
      --info-soft:#1C2C4C;
      --shadow: 0 10px 34px rgba(0,0,0,.45);
    }
  }
  :root[data-theme="dark"]{
    --header-bg:#1B2340;
    --bg:#141A2A;
    --surface:#1E2740;
    --surface-alt:#232C48;
    --border:#37406B;
    --text:#F3F5FA;
    --text-muted:#AAB3CC;
    /* Mismo motivo que en el bloque de @media: 4.26 y 3.96, por debajo de 4.5. */
    --text-faint:#939CB8;
    --primary:#8DA4EE;
    --primary-2:#B7C6F5;
    --primary-soft:#28325A;
    --category-head-bg:#32406F;
    --accent:#FFB624;
    --accent-text:#FFD37A;
    --accent-strong:#FFA522;
    --accent-soft:#3B2E12;
    --celeste:#7FB9DE;
    --success:#6FDDA0;
    --success-soft:#173425;
    --success-dot:#3ECB84;
    --info-text:#9DC3F2;
    --info-soft:#1C2C4C;
    --shadow: 0 10px 34px rgba(0,0,0,.45);
  }

  /* El atributo hidden debe ganarle a cualquier display propio de una clase
     (.quote-view usa display:flex y si no, queda visible en el HTML autocontenido). */
  [hidden]{ display:none !important; }

  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:"Poppins", system-ui, sans-serif;
    font-weight:400;
    padding-inline:16px;
    padding-block:32px 64px;
  }
  h1,h2,h3{ font-family:"Poppins", system-ui, sans-serif; font-weight:600; text-wrap:balance; margin:0; }
  .num{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
  a{ color:inherit; }
  :focus-visible{ outline:2px solid var(--primary-2); outline-offset:2px; border-radius:4px; }
  @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

  html{ scroll-behavior:smooth; }
  .wrap{ max-width:1120px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--esp-6); position:relative; }

  /* ⚠️ Esta regla es la que hace que la página respire, y faltaba.

     `.wrap` declaraba `gap:28px`, pero sus hijos son solo dos: `.producto-tabs` y este panel.
     Todo lo demás vive DENTRO del panel — que es un `<div role="tabpanel">` sin una sola regla
     en esta hoja, así que computaba `display:block; gap:normal`. Resultado medido dentro del
     iframe real: cabecera→contenido 0px, client-card→price-card 0px, price-card→layout 0px,
     layout→cta 0px, contact→iva→footer 0px. Los únicos respiros venían del `margin` por
     defecto de un `<p>`.

     Un gap declarado en un contenedor no alcanza a los nietos. Es un fallo que no rompe nada,
     no sale en ningún test y solo se ve mirando la página. */
  #panel-calculadora{ display:flex; flex-direction:column; gap:var(--esp-6); }

  /* Las cuatro categorías estaban a 0px entre sí, así que las doce casillas se leían como una
     lista de doce y no como cuatro grupos de tres. La agrupación existía en el HTML y no en el
     píxel, que es lo que de verdad reduce la carga de elegir.

     16px y no 32: dentro de la lista de servicios las tarjetas son hermanas, no secciones. La
     jerarquía la hace la diferencia entre los dos valores, no el valor en sí. */
  #categories{ display:flex; flex-direction:column; gap:var(--esp-4); }

  /* barra flotante de total (solo móvil) */
  .mobile-total-bar{ display:none; }
  @media (max-width:899px){
    .mobile-total-bar{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      position:fixed; left:0; right:0; bottom:0; z-index:40;
      background:var(--header-bg); color:#fff;
      padding:12px clamp(16px,4vw,24px); padding-bottom:calc(12px + env(safe-area-inset-bottom));
      box-shadow:0 -6px 20px rgba(0,0,0,.18);
    }
    .mtb-info{ display:flex; flex-direction:column; gap:1px; }
    .mtb-label{ font-size:0.72rem; color:rgba(255,255,255,.68); }
    .mtb-value{ font-size:1.25rem; font-weight:700; color:#fff; }
    /* Se llamaba `.mtb-link` y la plantilla usa `.mtb-btn`, así que este bloque entero no se
       aplicaba a nada: el CTA salía con los estilos por defecto de un `<a>` —texto subrayado de
       113x24— donde tenía que haber una píldora naranja. CSS muerto que no falla en ninguna
       parte y que solo se ve mirando.
       El padding sube a 12/18 para que el objetivo táctil llegue a 44px de alto. */
    .mtb-btn{ display:inline-flex; align-items:center; min-height:44px; font-family:"Poppins"; font-size:0.82rem; font-weight:600; color:#1B2340; background:var(--accent); padding:12px 18px; border-radius:999px; text-decoration:none; white-space:nowrap; flex-shrink:0; }
    body{ padding-bottom:76px; }
  }

  /* header */
  .top{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background:var(--header-bg); border-radius:var(--radius-l); padding:22px clamp(18px,4vw,30px); overflow:hidden; border:1px solid rgba(255,255,255,.06); }
  /* El logo OFICIAL, entero, como imagen.

     Antes aquí había `.brand-mark` (solo el isotipo, y encima una versión con el trazo más
     grueso que el oficial) más `.brand-name` con "LaCasaMía" escrito en Poppins. Eso es
     reconstruir el logo con otras letras: el oficial trae su propia tipografía dibujada, con
     una 'a' y una 'M' que Poppins no tiene, y dice "La CasaMia" —con espacio y sin tilde—.
     Es lo primero que nota quien conoce la marca.

     La caja tiene la proporción exacta del archivo (4.186) y `background-size:contain`, así que
     el logo no se puede deformar ni aunque alguien toque una de las dos medidas. Va el negativo
     porque `.top` es navy en los dos temas. */
  /* Solo el logo. La caja tiene la proporción exacta del archivo (4.186) y `contain`, así que no
     se puede deformar ni tocando una de las dos medidas. Va el negativo porque `.top` es navy en
     los dos temas. */
  .brand{ display:block; width:167px; height:40px; position:relative; z-index:1; flex-shrink:0;
    background:url("/static/img/marca-negativo.png") left center / contain no-repeat; }
  .brand:hover{ opacity:.85; }
  .mode-toggle{ display:inline-flex; background:rgba(255,255,255,.14); border-radius:999px; padding:4px; gap:4px; position:relative; z-index:1; }
  .mode-btn{ font-family:"Poppins"; font-weight:600; font-size:0.9rem; padding:9px 18px; border-radius:999px; border:none; background:transparent; color:rgba(255,255,255,.75); cursor:pointer; white-space:nowrap; }
  .mode-btn[aria-pressed="true"]{ background:var(--accent); color:#3D2A00; }

  /* A 390px el toggle medía 353.6px dentro de una `.top` de 327.2px con `overflow:hidden`, así
     que el segundo botón se leía "Busco arrier", cortado a media palabra. El control seguía
     siendo pulsable —su centro cae dentro del viewport— pero parecía roto, que en un control de
     dos opciones es casi peor: el usuario no sabe cuál es la otra.

     Ocupa el ancho completo y reparte a partes iguales. Se permite que la etiqueta pase a dos
     líneas en vez de encogerla más: a este tamaño, legible en dos líneas gana a apretada en una. */
  @media (max-width:560px){
    .mode-toggle{ width:100%; }
    .mode-btn{ flex:1 1 0; padding-inline:10px; white-space:normal; line-height:1.25; text-align:center; }
  }

  /* `--accent-strong` (#FFA522) sobre el fondo claro daba 1.82:1, el segundo peor contraste de la
     página. Un naranja no llega a 4.5 sobre casi-blanco sin dejar de ser naranja, así que usa el
     ámbar oscuro que ya existe en la paleta para texto: 5.35 sobre el fondo, 5.78 sobre blanco.
     En modo oscuro `--accent-text` es #FFD37A y da 12.26, así que el mismo token sirve para los
     dos temas. El naranja vivo se queda donde puede: en fondos y filetes, no en texto pequeño. */
  .eyebrow{ text-transform:uppercase; letter-spacing:0.16em; font-size:0.74rem; font-weight:600; color:var(--accent-text); }
  h1.page-title{ font-size:1.75rem; margin-top:6px; }
  .lede{ color:var(--text-muted); font-size:0.98rem; max-width:58ch; line-height:1.55; margin-top:8px; font-weight:400; }

  /* price card */
  .price-card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:24px clamp(18px,4vw,32px); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px; overflow:hidden; }
  .price-card::after{ content:""; position:absolute; top:0; right:0; width:96px; height:56px; background:var(--accent-soft);
    border-bottom-left-radius:72px; opacity:.9; }
  .price-card::before{ content:""; position:absolute; bottom:0; left:0; width:120px; height:34px; background:var(--primary-soft);
    border-top-right-radius:60px; }
  .price-card-head{ position:relative; z-index:1; }
  .price-input-row, .price-card > div:nth-child(3), .chips{ position:relative; z-index:1; }
  .price-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .price-label{ font-weight:600; font-size:0.98rem; }
  .price-sub{ color:var(--text-faint); font-size:0.85rem; }
  .price-input-row{ display:flex; align-items:center; gap:10px; }
  .price-currency{ font-weight:600; font-size:clamp(1.6rem,4vw,2.3rem); color:var(--primary-2); }
  .price-input{
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight:600; font-size:clamp(1.6rem,4vw,2.3rem); color:var(--text);
    background:transparent; border:none; border-bottom:2px solid var(--border); padding:2px 4px; width:100%;
    max-width:340px;
  }
  .price-input:focus{ border-bottom-color:var(--primary-2); outline:none; }
  input[type="range"]{ width:100%; accent-color:var(--primary-2); height:6px; }
  .price-scale{ display:flex; justify-content:space-between; font-size:0.75rem; color:var(--text-faint); }
  .chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{ font-family:"Poppins"; font-size:0.82rem; font-weight:600; padding:8px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text); cursor:pointer; }
  .chip:hover{ border-color:var(--primary-2); color:var(--primary-2); }

  /* client info card */
  .client-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:20px clamp(18px,4vw,28px); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; }
  .client-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:640px){ .client-grid{ grid-template-columns:1fr 1fr; } }
  .field-label{ display:block; font-weight:600; font-size:0.85rem; color:var(--text-muted); margin-bottom:6px; }
  .field-input{ font-family:"Poppins"; font-size:0.95rem; color:var(--text); background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-s); padding:11px 14px; width:100%; }
  .field-input:focus{ outline:none; border-color:var(--primary-2); }
  .field-input::placeholder{ color:var(--text-faint); }

  /* layout */
  .layout{ display:grid; grid-template-columns:1fr; grid-template-areas:"services" "summary"; gap:24px; align-items:start; }
  @media (min-width:900px){
    .layout{ grid-template-columns:1.65fr 1fr; grid-template-areas:"services summary"; }
    .summary{ position:sticky; top:20px; }
  }
  /* `min-width:0` no es cosmético: un item de grid vale `min-width:auto` por defecto, así que la
     pista `1fr` no podía encoger por debajo del min-content de `.services` (337.4px). Con el
     `padding-inline:16px` del body, la página desbordaba en cualquier viewport bajo ~370px CSS
     — y en `?embed=1`, donde `body` lleva `overflow:hidden`, el desbordamiento no se puede ni
     scrollear: son 42px de contenido inalcanzable dentro del iframe de Wix. */
  .services{ grid-area:services; min-width:0; display:flex; flex-direction:column; gap:var(--esp-4); }
  .summary{ grid-area:summary; }

  .services-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .text-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .pill-btn{ font-family:"Poppins"; font-size:0.82rem; font-weight:600; padding:9px 16px; border-radius:999px; cursor:pointer; }
  .pill-btn.secondary{ background:var(--surface); border:2px solid var(--primary); color:var(--primary); }
  .pill-btn.secondary:hover{ background:var(--primary-soft); }
  .pill-btn.primary{ background:var(--accent); border:2px solid var(--accent); color:#3D2A00; font-size:0.98rem; padding:15px 36px; }
  .pill-btn.primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }

  .cta-section{ display:flex; flex-direction:column; align-items:center; gap:12px; padding-block:8px; }

  /* vista de cotización generada */
  .quote-view{ display:flex; flex-direction:column; gap:20px; scroll-margin-top:20px; }
  .quote-header{ position:relative; overflow:hidden; background:var(--header-bg); border-radius:var(--radius-l); padding:24px clamp(18px,4vw,32px); border:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; gap:18px; }
  .quote-header::before{ content:""; position:absolute; top:-50px; right:-50px; width:170px; height:170px; background:var(--accent); opacity:.14; border-radius:42% 58% 54% 46%/48% 42% 58% 52%; }
  .quote-brand{ display:block; width:109px; height:26px; position:relative; z-index:1; background:url("/static/img/marca-negativo.png") left center / contain no-repeat; }
  .quote-eyebrow{ position:relative; z-index:1; color:var(--accent); font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; }
  .quote-title{ position:relative; z-index:1; color:#fff; font-size:1.3rem; font-weight:700; letter-spacing:-0.01em; margin-top:4px; }
  .quote-meta-row{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }
  .quote-chip{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-m); padding:10px 16px; min-width:140px; flex:1 1 140px; }
  .quote-chip .qc-label{ display:block; font-size:0.64rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:2px; }
  .quote-chip .qc-value{ color:#fff; font-weight:600; font-size:0.9rem; word-break:break-word; }
  .quote-cats{ display:grid; grid-template-columns:1fr; gap:16px; }
  @media (min-width:720px){ .quote-cats{ grid-template-columns:1fr 1fr; } }
  .quote-cat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow); overflow:hidden; }
  .quote-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; background:var(--category-head-bg); border-bottom:1px solid var(--border); }
  .quote-item{ display:flex; justify-content:space-between; gap:12px; padding:11px 18px; border-top:1px solid var(--border); font-size:0.85rem; color:var(--text); }
  .quote-item:first-child{ border-top:none; }
  .quote-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
  .quote-actions a, .quote-actions button{ display:inline-flex; align-items:center; gap:8px; font-family:"Poppins"; font-weight:600; font-size:0.9rem; padding:13px 22px; border-radius:999px; text-decoration:none; box-shadow:var(--shadow); }
  .quote-actions a svg, .quote-actions button svg{ width:18px; height:18px; flex-shrink:0; }
  .qa-whatsapp{ background:#25D366; color:#fff; }
  .qa-whatsapp:hover{ background:#1EBE5A; }
  .quote-actions a.qa-disabled, .quote-actions button.qa-disabled{ background:var(--surface-alt); color:var(--text-faint); box-shadow:none; border:1px dashed var(--border); cursor:not-allowed; pointer-events:none; }
  .quote-actions button{ border:none; cursor:pointer; }
  .quote-hint{ text-align:center; font-size:0.82rem; color:var(--text-muted); margin:0; padding:0 12px; }
  .quote-hint.is-warning{ color:var(--accent-text); }

  .contact-section{ display:flex; flex-direction:column; align-items:center; gap:12px; padding-block:4px 6px; border-top:1px solid var(--border); padding-top:26px; margin-top:4px; }
  .contact-title{ font-family:"Poppins"; font-size:0.95rem; font-weight:600; color:var(--text); margin:0; }
  .contact-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }
  /* Texto oscuro y no blanco: blanco sobre el verde de WhatsApp da 1.98:1, el peor contraste de
     toda la página. Se conserva el #25D366 de marca —que es justo lo que hace reconocible el
     botón— y se cambia lo único que se podía cambiar sin perderlo: el texto, que sube a 7.47. */
  .whatsapp-btn{ display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#0A2E18; font-family:"Poppins"; font-weight:600; font-size:0.88rem; padding:10px 18px; border-radius:999px; text-decoration:none; box-shadow:var(--shadow); transition:background .15s ease; }
  .whatsapp-btn:hover{ background:#1EBE5A; }
  .whatsapp-btn svg{ width:19px; height:19px; flex:none; }
  .contact-phone{ display:inline-flex; align-items:center; gap:6px; font-family:"Poppins"; font-weight:600; font-size:0.88rem; color:var(--text); text-decoration:none; }
  .contact-phone:hover{ text-decoration:underline; }

  /* category card */
  .category{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow); overflow:hidden; }
  .category-head{ display:flex; gap:14px; align-items:flex-start; padding:18px clamp(16px,3vw,24px); background:var(--category-head-bg); border-bottom:1px solid var(--border); }
  .cat-icon{ width:38px; height:38px; border-radius:10px; background:var(--primary-soft); color:var(--primary-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .cat-icon svg{ width:20px; height:20px; }
  .cat-title{ font-weight:600; font-size:1.02rem; }
  .cat-desc{ color:var(--text-muted); font-size:0.86rem; margin-top:3px; line-height:1.45; font-weight:400; }

  .item{ display:flex; align-items:flex-start; gap:12px; padding:14px clamp(16px,3vw,24px); border-bottom:1px solid var(--border); }
  .item:last-child{ border-bottom:none; }
  .item-check{ width:20px; height:20px; margin-top:2px; accent-color:var(--primary-2); flex-shrink:0; cursor:pointer; }
  .item-body{ flex:1; min-width:0; }
  .item-desc{ font-size:0.92rem; line-height:1.4; font-weight:400; }
  label.item-desc{ cursor:pointer; }
  .item-meta{ display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
  .badge{ display:inline-flex; align-items:center; gap:7px; font-size:0.7rem; font-weight:600; letter-spacing:0.01em; padding:4px 11px; border-radius:999px; }
  .badge::before{ content:""; width:7px; height:7px; border-radius:50%; }
  .badge.fijo{ background:var(--info-soft); color:var(--info-text); }
  .badge.fijo::before{ background:var(--info-text); }
  .badge.variable{ background:var(--success-soft); color:var(--success); }
  .badge.variable::before{ background:var(--success-dot); }
  .item-price{ font-weight:600; font-size:1rem; white-space:nowrap; text-align:right; min-width:104px; }
  .item.is-off .item-desc{ color:var(--text-faint); }
  .item.is-off .item-price{ color:var(--text-faint); }

  /* summary */
  .summary-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:22px clamp(18px,3vw,26px); display:flex; flex-direction:column; gap:18px; }
  .summary-title{ font-weight:600; font-size:1.05rem; }
  .summary-rows{ display:flex; flex-direction:column; gap:10px; }
  .srow{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:0.9rem; }
  .srow .k{ color:var(--text-muted); font-weight:400; }
  .srow .v{ font-weight:600; }
  .divider{ height:1px; background:var(--border); }
  .srow.total{ font-size:1.15rem; }
  .srow.total .k{ color:var(--text); font-weight:600; }
  .srow.total .v{ font-weight:700; color:var(--primary-2); font-size:1.35rem; }

  .exito-note{ font-size:0.8rem; font-weight:600; color:var(--accent-text); background:var(--accent-soft); border-radius:999px; padding:6px 12px; text-align:center; }
  .exito-toggle{ display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-muted); cursor:pointer; padding:12px; background:var(--surface-alt); border-radius:var(--radius-m); }
  .exito-toggle input{ width:18px; height:18px; accent-color:var(--primary-2); flex-shrink:0; cursor:pointer; }
  .exito-toggle span{ color:var(--text); font-weight:500; }
  .exito-toggle small{ color:var(--text-muted); font-weight:400; }

  .compare{ background:var(--surface-alt); border-radius:var(--radius-m); padding:16px; display:flex; flex-direction:column; gap:12px; }
  .compare-title{ font-size:0.76rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-faint); }
  .bar-row{ display:flex; flex-direction:column; gap:4px; }
  .bar-label{ display:flex; justify-content:space-between; font-size:0.82rem; }
  .bar-label .name{ font-weight:600; }
  .bar-label .val{ font-weight:600; }
  .bar-track{ height:10px; border-radius:999px; background:var(--border); overflow:hidden; }
  .bar-fill{ height:100%; border-radius:999px; }
  .bar-fill.lcm{ background:var(--primary-2); }
  .bar-fill.broker{ background:var(--text-faint); opacity:0.6; }

  .savings{ display:flex; align-items:center; gap:10px; background:var(--success-soft); color:var(--success); border-radius:var(--radius-m); padding:12px 14px; }
  .savings svg{ width:20px; height:20px; flex-shrink:0; }
  .savings b{ font-weight:700; }

  .disclaimer{ font-size:0.76rem; color:var(--text-faint); line-height:1.45; font-weight:400; }

  footer{ text-align:center; color:var(--text-faint); font-size:0.8rem; padding-top:8px; }
  .iva-note{ text-align:center; color:var(--text-faint); font-size:0.76rem; margin:0; }

  /* El atributo hidden debe ganarle a cualquier display propio de una clase
     (.quote-view y .item-note usan display:flex y si no, quedan visibles). */
  [hidden]{ display:none !important; }

  /* selector de localidad, area y direccion */
  .field-select{ font-family:"Poppins"; font-size:0.95rem; color:var(--text); background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-s); padding:11px 14px; width:100%; appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C667A' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:38px; }
  .field-select:focus{ outline:none; border-color:var(--primary-2); }
  .field-hint{ font-size:0.74rem; color:var(--text-faint); margin-top:5px; line-height:1.35; }
  .field-wide{ grid-column:1/-1; }

  /* nota por item (restriccion de zona, area faltante, costo de terceros) */
  .item-note{ display:flex; align-items:flex-start; gap:6px; font-size:0.76rem; line-height:1.4; color:var(--text-muted); background:var(--surface-alt); border-radius:var(--radius-s); padding:7px 10px; margin-top:8px; }
  .item-note svg{ width:13px; height:13px; flex:none; margin-top:2px; }
  .item-note.is-blocked{ color:var(--accent-text); background:var(--accent-soft); }
  .item.is-blocked .item-check{ cursor:not-allowed; }

  /* valor por servicio: pesos arriba, equivalente en canones debajo */
  .item-price{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:118px; }
  /* Ese min-width de 118px es el otro extremo del mismo desbordamiento: con `white-space:nowrap`
     en las dos líneas de precio, fijaba el min-content de `.item` en 300.4px. En pantallas
     estrechas la columna de precio se gana su ancho sola. */
  @media (max-width:430px){ .item-price{ min-width:0; } }
  .item-price .ip-cop{ font-weight:600; font-size:1rem; white-space:nowrap; }
  .item-price .ip-canon{ font-weight:500; font-size:0.72rem; color:var(--text-muted); white-space:nowrap; }
  .item.is-off .item-price .ip-cop, .item.is-off .item-price .ip-canon{ color:var(--text-faint); }

  .services-legend{ font-size:0.78rem; color:var(--text-muted); line-height:1.45; }
  .canon-equiv{ font-size:0.86rem; font-weight:600; color:var(--primary-2); text-align:right; margin-top:-4px; }
  .exito-def{ font-size:0.78rem; color:var(--text-muted); background:var(--surface-alt); border-radius:var(--radius-m); padding:10px 12px; line-height:1.45; }
  .exito-def b{ color:var(--text); font-weight:600; }

  /* resumen de cobros dentro de la cotización */
  .quote-totals{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:18px clamp(16px,3vw,24px); display:flex; flex-direction:column; gap:10px; }
  .qt-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:0.92rem; }
  .qt-row .qtr-k{ color:var(--text-muted); }
  .qt-row .qtr-v{ font-weight:600; white-space:nowrap; }
  .qt-row.is-total{ font-size:1.08rem; }
  .qt-row.is-total .qtr-k{ color:var(--text); font-weight:600; }
  .qt-row.is-total .qtr-v{ font-weight:700; color:var(--primary-2); font-size:1.25rem; }
  .qt-divider{ height:1px; background:var(--border); }
  .qt-canones{ text-align:right; font-size:0.84rem; font-weight:600; color:var(--primary-2); }
  .qt-ajuste{ font-size:0.78rem; color:var(--text-muted); line-height:1.45; border-top:1px dashed var(--border); padding-top:10px; }

  /* condiciones por plazo (solo arrendador con inmueble comercial) */
  .quote-plazo{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:18px clamp(16px,3vw,24px); display:flex; flex-direction:column; gap:10px; }
  .qp-title{ margin:0; font-size:0.76rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--primary-2); }
  .qp-intro, .qp-nota{ margin:0; font-size:0.82rem; color:var(--text-muted); line-height:1.5; }
  .qp-nota{ font-size:0.78rem; }
  .qp-tabla{ width:100%; border-collapse:collapse; font-size:0.86rem; }
  .qp-tabla th, .qp-tabla td{ padding:8px 6px; border-bottom:1px solid var(--border); text-align:right; white-space:nowrap; }
  .qp-tabla th:first-child, .qp-tabla td:first-child{ text-align:left; padding-left:0; }
  .qp-tabla th:last-child, .qp-tabla td:last-child{ padding-right:0; }
  .qp-tabla thead th{ font-size:0.68rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); white-space:normal; }
  .qp-tabla tbody th{ font-weight:500; color:var(--text); }
  .qp-tabla td{ color:var(--text-muted); }
  .qp-tabla td:last-child{ font-weight:600; color:var(--text); }
  .qp-tabla .qp-adicional th, .qp-tabla .qp-adicional td{ border-bottom:none; }
  .qp-tabla .qp-adicional td{ text-align:left; white-space:normal; }
  /* En 360px las cuatro columnas solo caben si los textos se parten; el valor en pesos no. */
  @media (max-width:480px){
    .quote-plazo{ padding-inline:12px; }
    .qp-tabla{ font-size:0.72rem; }
    .qp-tabla thead th{ font-size:0.62rem; letter-spacing:0.03em; }
    .qp-tabla th, .qp-tabla td{ padding-inline:2px; white-space:normal; }
    .qp-tabla td:last-child{ white-space:nowrap; }
  }


  /* ============================================================================
     Toggle de PRODUCTO (Quiero vender / Quiero arrendar).

     Jerarquía deliberada: hay dos niveles de selección y si se ven igual, confunden.
       - Este control manda: ocupa el ancho, va arriba del todo, siempre visible.
       - El .mode-toggle de la cabecera oscura (propietario/arrendatario) es
         secundario y se lee como una pregunta DENTRO del producto ya elegido.
     ============================================================================ */
  .producto-tabs{ display:flex; gap:6px; background:var(--surface); border:1px solid var(--border);
    border-radius:999px; padding:6px; box-shadow:var(--shadow); }
  .producto-tab{ flex:1 1 0; font-family:"Poppins"; font-weight:600; font-size:clamp(0.92rem,2.4vw,1.05rem);
    padding:14px 18px; border-radius:999px; border:none; background:transparent; color:var(--text-muted);
    cursor:pointer; white-space:nowrap; transition:background .16s ease, color .16s ease; }
  .producto-tab:hover{ color:var(--text); }
  .producto-tab[aria-selected="true"]{ background:var(--primary-2); color:#fff; }
  .producto-tab:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

  /* Sin JS el panel oculto seguiría ocupando sitio: [hidden] debe ganarle a cualquier display. */
  [hidden]{ display:none !important; }

  /* En modo embebido (iframe de Wix) la página no lleva scroll propio: la altura la
     ajusta el contenedor de Wix por postMessage. Ver app/static/js/embed.js. */
  body.is-embed{ overflow:hidden; }
  body.is-embed .wrap{ padding-top:14px; }

  /* ⚠️ El precio dentro del iframe de Wix.

     `.summary` usa `position:sticky` y `.mobile-total-bar` usa `position:fixed`. Los dos se
     resuelven contra el viewport del IFRAME — y el iframe no tiene viewport propio: la app le
     reporta a Wix su altura completa por `postMessage`, así que el marco crece hasta el tamaño
     del contenido y su scroll interno es exactamente 0.

     Medido en el simulador: iframe de 5193px, `innerHeight` 5190, scroll interno 0. Tras
     desplazar 2000px la página PADRE, el `top` de `.summary` seguía siendo 4260.7 —el mismo— y
     la barra flotante seguía clavada en 5125, es decir al final del documento. Ninguno de los
     dos mecanismos que sostienen la promesa del producto ("mueve el deslizador y mira el
     precio") funciona donde está todo el tráfico. En localhost, en pestaña propia, los dos
     funcionan perfectamente: esa es la trampa.

     Arreglo sin depender de que Wix coopere con la altura: el total baja al flujo, intercalado
     tras cada categoría. Deja de hacer falta que algo se pegue. Fuera del iframe no se muestra,
     porque allí la barra flotante sí funciona y tener las dos cosas sería ruido. */
  .cat-total{ display:none; }
  body.is-embed .cat-total{
    display:flex; align-items:center; justify-content:space-between; gap:var(--esp-3);
    background:var(--primary-soft); color:var(--primary-2);
    border-radius:var(--radius-m); padding:12px clamp(16px,3vw,24px);
  }
  body.is-embed .cat-total-k{ font-size:0.82rem; font-weight:600; }
  body.is-embed .cat-total-v{ font-size:1.05rem; font-weight:700; }
  /* La última sobra: justo debajo viene el resumen completo. */
  body.is-embed #categories .cat-total:last-child{ display:none; }

  /* Y la barra flotante, que dentro del iframe solo es un pie muerto al final del documento.
     Con ella se va también el `padding-bottom:76px` que reservaba su sitio. */
  body.is-embed .mobile-total-bar{ display:none; }
  @media (max-width:899px){ body.is-embed{ padding-bottom:0; } }

  /* ============================================================================
     Autorización de datos, envío y enlace permanente (fase 1c)
     ============================================================================ */

  /* Campo trampa del antiabuso. Fuera de pantalla en vez de display:none, porque algunos bots
     ignoran lo que está oculto de la forma obvia. */
  .campo-trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .autorizacion{ display:flex; align-items:flex-start; gap:10px; margin:0 auto 14px; max-width:60ch;
    font-size:0.82rem; line-height:1.45; color:var(--text-muted); cursor:pointer; }
  .autorizacion input{ margin-top:2px; width:18px; height:18px; flex:none; accent-color:var(--primary-2); cursor:pointer; }
  .autorizacion a{ color:var(--primary-2); }
  .autorizacion.is-faltante{ color:var(--accent-text); }
  .autorizacion.is-faltante input{ outline:2px solid var(--accent-strong); outline-offset:2px; }

  /* Recuadro de Turnstile: vacío salvo que Cloudflare pida un clic. Centrado bajo la autorización. */
  .turnstile{ display:flex; justify-content:center; }
  .turnstile:not(:empty){ margin:0 auto 14px; }

  .qa-enviar{ background:var(--primary-2); color:#fff; border:none; font-family:"Poppins";
    font-weight:600; cursor:pointer; }
  .qa-enviar:hover:not(:disabled){ filter:brightness(1.08); }
  .qa-enviar:disabled{ opacity:.6; cursor:progress; }

  .enlace-resultado{ margin:14px auto 0; max-width:60ch; padding:14px 16px; background:var(--success-soft);
    border:1px solid var(--success-dot); border-radius:var(--radius-m); }
  .enlace-titulo{ margin:0 0 8px; font-weight:600; font-size:0.9rem; color:var(--success); }
  .enlace-fila{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .enlace-url{ flex:1 1 220px; font-size:0.82rem; color:var(--primary-2); word-break:break-all; }
  .enlace-copiar{ font-family:"Poppins"; font-size:0.8rem; font-weight:600; padding:7px 14px;
    border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
  .enlace-copiar:hover{ background:var(--surface-alt); }
  .enlace-pie{ margin:8px 0 0; font-size:0.76rem; color:var(--text-muted); }