/* =========================================================
   COTIZAR — el panel sobre la agencia
   =========================================================
   El dueño pidió el cotizador a la manera de Olva: una sola
   tarjeta compacta flotando sobre una fotografía de la casa.
   La fotografía es la agencia con el cartel de la Q» pintado
   —sale del logo vectorial original— y el panel se ancla a la
   IZQUIERDA para no taparlo: el ojo lee panel, cartel y el
   tracto saliendo al corredor, en ese orden.

   Nada de «¿dónde lo recibes?»: la casa entrega en agencia,
   no a domicilio, y el panel lo dice en letra chica en vez de
   ofrecer un desplegable que mentiría.

   El precio sale en soles enteros. Los céntimos del Excel ya
   los promedió el motor: al público, cifra redonda.
   ========================================================= */

:root {
  --hondo: #05222A;
  --tinta: #14202B;
  --gris: #667581;
  --blanco: #FFFFFF;
  --marca: #14808F;
  --marca-viva: #1B9DAE;
  --marca-osc: #0B5B67;
  --marca-suave: #E1F0F2;
  --whatsapp: #128C4B;
  --panel-fondo: rgba(4, 22, 28, .78);
  --panel-borde: rgba(255, 255, 255, .14);
  --campo-fondo: rgba(255, 255, 255, .96);
  --f-ui: "Archivo", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { height: 100%; }
body {
  min-height: 100%;
  font-family: var(--f-ui);
  color: var(--tinta);
  background: var(--hondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex; flex-direction: column;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* el honeypot vive fuera de la pantalla, no con display:none:
   algunos bots saltan lo invisible */
.hoyo { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* =========================================================
   LA FOTOGRAFÍA DE LA CASA
   =========================================================
   Fija detrás de todo. El velo oscurece solo la franja del
   panel (izquierda) y el pie: el cartel y el tracto quedan
   con su luz. */
.lienzo { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.fondo { width: 100%; height: 100%; object-fit: cover; object-position: 62% 44%; }
.velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(3, 16, 21, .82) 0%, rgba(3, 16, 21, .55) 34%, rgba(3, 16, 21, .12) 62%, rgba(3, 16, 21, .05) 100%),
    linear-gradient(to top, rgba(3, 16, 21, .55) 0%, transparent 22%);
}

/* =========================================================
   CABECERA SOBRE LA FOTO
   ========================================================= */
.cabecera-p { background: transparent; }
.cabecera-p-int {
  max-width: 78rem; margin: 0 auto; padding: 0 1.5rem;
  height: 4.1rem; display: flex; align-items: center; justify-content: space-between;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca-q { width: 1.9rem; height: 1.9rem; flex: none; }
.marca-nombre { font-size: .95rem; font-weight: 800; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.cabecera-p-nav { display: flex; gap: 1.4rem; }
.cabecera-p-nav a {
  color: rgba(255, 255, 255, .88); text-decoration: none;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.cabecera-p-nav a:hover { color: #fff; }

/* =========================================================
   EL PANEL
   ========================================================= */
.cotizar {
  flex: 1;
  width: 100%; max-width: 78rem; margin: 0 auto;
  padding: 1.2rem 1.5rem 2.6rem;
  display: flex; justify-content: flex-start;
}

.panel {
  width: 100%; max-width: 27.5rem;
  min-width: 0;   /* flex item: sin esto, el select más largo infla el panel */
  background: var(--panel-fondo);
  border: 1px solid var(--panel-borde);
  border-radius: 18px;
  padding: 1.5rem 1.5rem 1.3rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: .8rem;
}

.panel h1 {
  color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: .1rem;
}

/* ---- campos ---- */
.campo { display: flex; flex-direction: column; gap: .32rem; min-width: 0; }
.campo > span, .campo-titulo {
  color: rgba(255, 255, 255, .85);
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.campo select, .campo input {
  min-width: 0;
  font: inherit; font-size: .92rem; color: var(--tinta);
  background: var(--campo-fondo);
  border: 1px solid transparent; border-radius: 9px;
  padding: .62rem .7rem; width: 100%;
}
.campo select:focus-visible, .campo input:focus-visible {
  outline: none; border-color: var(--marca-viva);
  box-shadow: 0 0 0 3px rgba(27, 157, 174, .35);
}
.campo input::placeholder { color: #9AA7B1; }

/* ---- el servicio, con la jerarquía que pidió el dueño ----
   El consolidado ocupa el ancho entero y viene puesto; los dos expresos
   van debajo, a media caja cada uno. No es capricho estético: «el más
   importante es el consolidado, eso es lo que la mayoría quiere». */
.servicios { display: flex; flex-direction: column; gap: .5rem; margin-top: .32rem; }
.serv-menores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.serv {
  font: inherit; color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 9px;
  padding: .45rem .4rem .4rem; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .02rem;
  transition: background .15s, border-color .15s, opacity .15s;
}
.serv b { font-size: .8rem; font-weight: 700; }
.serv small { font-size: .67rem; font-weight: 500; color: rgba(255, 255, 255, .6); }
.serv.mayor { padding: .62rem .5rem .55rem; }
.serv.mayor b { font-size: .98rem; }
.serv.mayor small { font-size: .74rem; }
.serv.activa { background: var(--marca); border-color: var(--marca-viva); color: #fff; }
.serv.activa small { color: rgba(255, 255, 255, .85); }
.serv:focus-visible { outline: 2px solid var(--marca-viva); outline-offset: 2px; }
/* fuera de la red el consolidado no se puede prestar: se apaga, no se esconde,
   para que se entienda por qué el panel saltó a expreso */
.serv[disabled] { opacity: .38; cursor: not-allowed; }
.serv-aviso {
  margin-top: .45rem; font-size: .74rem; line-height: 1.45;
  color: rgba(255, 255, 255, .68);
}
.serv-aviso b { color: rgba(255, 255, 255, .88); }

/* ---- carga y medidas ---- */
.fila-carga { display: flex; gap: .6rem; }
.fila-carga .crece { flex: 1; }
.fila-carga .angosto { width: 5.4rem; flex: none; }
.fila-medidas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }

/* ---- el botón ---- */
.boton-cotizar {
  font: inherit; font-size: 1.02rem; font-weight: 800; color: #fff;
  background: var(--marca);
  border: 0; border-radius: 10px;
  padding: .85rem 1rem; cursor: pointer; margin-top: .2rem;
  transition: background .15s, transform .1s;
}
.boton-cotizar:hover { background: var(--marca-viva); }
.boton-cotizar:active { transform: translateY(1px); }
.boton-cotizar:disabled { opacity: .6; cursor: wait; }

/* ---- la barra del precio, a la manera de Olva ---- */
.precio-barra {
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  padding: .62rem 1.1rem;
  display: flex; align-items: baseline; justify-content: center; gap: .5rem; flex-wrap: wrap;
  color: rgba(255, 255, 255, .85); font-size: .95rem;
}
.precio-monto { color: #fff; font-size: 1.35rem; font-weight: 600; }
.precio-nota { width: 100%; text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .65); }
.precio-nota:empty { display: none; }
.precio-barra[data-estado="listo"] { border-color: var(--marca-viva); background: rgba(20, 128, 143, .25); }
.precio-barra[data-estado="silencio"] { font-size: .88rem; }
.precio-barra[data-estado="silencio"] .precio-monto { display: none; }

.letra-chica {
  color: rgba(255, 255, 255, .62); font-size: .74rem; line-height: 1.45; text-align: center;
}
.letra-chica b { color: rgba(255, 255, 255, .8); }

/* ---- el segundo paso: guardarla con nombre y WhatsApp ---- */
.guardar {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: .9rem; display: flex; flex-direction: column; gap: .7rem;
}
.guardar-titulo { color: rgba(255, 255, 255, .88); font-size: .88rem; font-weight: 600; }
.guardar-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.boton-guardar {
  font: inherit; font-size: .95rem; font-weight: 700; color: #fff;
  background: var(--whatsapp);
  border: 0; border-radius: 10px;
  padding: .75rem 1rem; cursor: pointer;
  transition: filter .15s;
}
.boton-guardar:hover { filter: brightness(1.1); }
.boton-guardar:disabled { opacity: .6; cursor: wait; }

/* =========================================================
   EL ESTADO FINAL
   ========================================================= */
.listo { align-items: center; text-align: center; gap: .5rem; }
.listo h2 { color: #fff; font-size: 1.3rem; font-weight: 800; }
.listo-correlativo { color: var(--marca-viva); font-size: 1.5rem; font-weight: 600; }
.listo-precio { color: rgba(255, 255, 255, .9); font-size: .95rem; }
.listo-precio b { color: #fff; }
.listo-texto { color: rgba(255, 255, 255, .72); font-size: .86rem; line-height: 1.5; max-width: 24rem; }
.listo-acciones { display: flex; flex-direction: column; gap: .55rem; width: 100%; margin-top: .5rem; }
.boton-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--whatsapp); color: #fff; text-decoration: none;
  font-size: .95rem; font-weight: 700;
  border-radius: 10px; padding: .8rem 1rem;
}
.boton-whatsapp:hover { filter: brightness(1.1); }
.boton-fantasma {
  color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .86rem; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; padding: .7rem 1rem;
  text-align: center;
}
.boton-fantasma:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }

/* =========================================================
   EL PIE
   ========================================================= */
.pie-p {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: 78rem; margin: 0 auto; width: 100%;
  padding: 1rem 1.5rem 1.2rem;
  color: rgba(255, 255, 255, .65); font-size: .78rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.pie-p a { color: rgba(255, 255, 255, .8); }

/* =========================================================
   TELÉFONOS
   ========================================================= */
@media (max-width: 700px) {
  .cotizar { padding: .6rem .8rem 2rem; justify-content: center; }
  .panel { max-width: 100%; padding: 1.2rem 1.1rem 1.1rem; }
  .fondo { object-position: 48% 40%; }
  .velo { background: rgba(3, 16, 21, .62); }
  .fila-medidas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabecera-p-int { height: 3.6rem; padding: 0 1rem; }
}