/* ============================================================
   presupuesto.html — página suelta (mismos invariantes que
   servicios.html: no carga main.js, barra sin animación de intro,
   .panel__in forzado a visible sin cajón)
   ============================================================ */

.nav{animation:none;transform:none}
.nav__menu li{animation:none;opacity:1;transform:none}
.nav__mark a{pointer-events:auto;display:block}
.nav__mark img{width:198px;height:auto;display:block}
@media (max-width:820px){.nav__mark img{width:150px}}

.pres-wrap{position:relative;max-width:1100px;margin:0 auto;
  padding:0 clamp(20px,5vw,64px) clamp(60px,8vw,110px)}

.pres-hero{padding:clamp(56px,8vw,104px) 0 clamp(30px,4vw,48px);
  max-width:62ch}
.pres-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--olive);margin-bottom:14px}
.pres-hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;line-height:1.05;
  letter-spacing:-.03em;margin-bottom:18px;text-align:left}
.pres-lead{font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:rgba(61,65,39,.78);
  text-align:left}

.pres-wrap>.jardin{position:fixed;inset:0;width:100vw;height:100vh;margin:0;z-index:0;overflow:hidden}
.pres-wrap>.pres-hero,.pres-wrap>.pres-grid{position:relative;z-index:1}

.pres-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:24px;align-items:start}

/* ---- resumen de la selección ---- */
.pres-resumen{background:var(--cream);border-radius:34px;padding:32px 30px;
  position:sticky;top:110px}
.pres-resumen h2{font-size:20px;font-weight:800;letter-spacing:-.015em;margin-bottom:16px}
.pres-resumen__vacio p{font-size:14.5px;line-height:1.6;color:rgba(61,65,39,.75);text-align:left}
/* El plan y, a su derecha, lo que cuesta lo marcado. El margen de abajo lo
   lleva la fila y no #presPlan: sin plan elegido, el precio sale solo en la
   fila y tiene que dejar el mismo aire. Con flex-wrap, si un nombre de plan
   largo y la cuota no caben juntos, el precio baja entero a la línea
   siguiente en vez de partirse. */
.pres-plan{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px}
.pres-plan:has(#presPlan:empty):has(#presPrecio[hidden]){display:none}
#presPlan{display:inline-flex;align-items:center;padding:10px 18px;
  background:var(--deep);color:var(--sand);border-radius:var(--r-pill);
  font-size:14.5px;font-weight:700}
#presPlan:empty{display:none}
/* Mismo reparto que el precio de una tarjeta de plan en servicios.css: la
   cifra de antes pequeña y tachada encima, la que se cobra grande debajo, y
   la cuota mensual al lado de esa cifra (pedido explícito).

   Lo delicado es que plan + cifra + cuota no siempre caben en una línea
   ("Tiendas" con mantenimiento, o un total de cinco cifras). Con el
   ancho natural, la fila se rendía entera y el precio caía debajo del plan.
   flex-basis 0 + min-width:min-content hace que la fila solo mida lo mínimo
   del bloque, que es la cifra: mientras la cifra quepa a la derecha del plan,
   el bloque se queda ahí y crece hasta el borde, y si dentro no cabe la
   cuota, es solo la cuota la que baja de línea. column-gap y no un margen
   para que, al bajar, no arrastre la sangría a la línea nueva. */
.pres-precio{flex:1 1 0%;min-width:min-content;margin:0;
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px;
  text-align:left;line-height:1.1}
.pres-precio__antes{flex-basis:100%;font-size:13px;font-weight:600;color:rgba(61,65,39,.5)}
.pres-precio__ahora{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--deep);
  white-space:nowrap}
.pres-precio__cuota{font-size:13px;font-weight:600;color:rgba(61,65,39,.7);white-space:nowrap}
/* flex-basis:100% le da una línea propia debajo del precio, aunque la cuota
   haya cabido al lado de la cifra. Se distingue por tamaño y no por color:
   el gris es el .72 de siempre para texto secundario, porque a 11px uno más
   claro ya no llega al contraste mínimo, y es justo la letra pequeña que
   alguien puede reclamar no haber visto. */
.pres-precio__iva{flex-basis:100%;margin-top:1px;font-size:11px;font-weight:600;
  letter-spacing:.02em;color:rgba(61,65,39,.72)}
.pres-precio__detalle{flex-basis:100%;margin-top:8px;font-size:12px;font-weight:500;
  line-height:1.6;color:var(--deep)}
/* El número de páginas del contador de servicios.html. Va entre el plan y
   los chips de módulos, con el peso de un dato y no de una etiqueta más:
   es una cifra que el cliente ha elegido a propósito. */
.pres-paginas{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--olive);
  margin-bottom:12px;text-align:left}
.pres-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pres-chips li{padding:8px 14px;background:var(--pale);border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;color:var(--deep)}
.pres-cambiar{display:inline-block;margin-top:4px;font-size:14px;font-weight:600;
  color:var(--olive);text-decoration:underline;text-underline-offset:3px}
.pres-cambiar:hover{color:var(--deep)}

/* ---- formulario ---- */
.pres-form{background:var(--cream);border-radius:34px;padding:32px 30px;
  display:grid;gap:20px}
.pres-field{display:grid;gap:8px;text-align:left}
.pres-field label{font-size:14px;font-weight:700;color:var(--deep)}
.pres-opcional{font-weight:500;color:rgba(61,65,39,.55)}
.pres-field input,.pres-field textarea{
  font:inherit;font-size:15px;padding:13px 16px;border-radius:16px;
  border:1.5px solid rgba(61,65,39,.18);background:var(--sand);color:var(--deep);
  resize:vertical}
.pres-field input:focus-visible,.pres-field textarea:focus-visible{
  outline:2.5px solid var(--olive);outline-offset:2px;border-color:transparent}
.pres-form .btn{justify-self:start;margin-top:4px}
.pres-consentimiento{display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.6;color:var(--deep);text-align:left}
.pres-consentimiento input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;
  accent-color:var(--olive);cursor:pointer}
.pres-consentimiento input:focus-visible{outline:2.5px solid var(--olive);outline-offset:3px}
.pres-consentimiento label{cursor:pointer}
.pres-consentimiento a{color:var(--olive);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pres-estado{margin:0;font-size:14px;text-align:left}
.pres-estado--ok{color:var(--olive);font-weight:600}
.pres-estado--error{color:var(--alerta);font-weight:600}
.pres-privacidad{margin:0;font-size:13px;color:rgba(61,65,39,.72);text-align:left}
.pres-privacidad a{color:var(--olive);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- pregunta de la primera reunión ----
   Tres botones que por debajo son radios. El radio de verdad sigue en la
   página (escondido, no display:none: con display:none el teclado no lo
   alcanza y el lector de pantalla no lo anuncia) y quien pinta el botón es
   su <label>, que al ir pegado detrás del input se puede colorear con
   input:checked + label cuando está elegido. El fieldset se queda en
   display:block y no en grid: el <legend> se pinta aparte y los
   navegadores no lo colocan igual dentro de un contenedor grid, así que
   el aire entre la pregunta y los botones lo pone su margen. */
.pres-reunion{border:0;padding:0;margin:0;min-width:0;text-align:left}
.pres-reunion legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:700;
  color:var(--deep)}
.pres-reunion__opciones{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.pres-reunion input{position:absolute;width:1px;height:1px;margin:0;opacity:0;
  pointer-events:none}
.pres-reunion label{cursor:pointer;padding:12px 22px;border-radius:var(--r-pill);
  border:1.5px solid rgba(61,65,39,.18);background:var(--sand);color:var(--deep);
  font-size:14.5px;font-weight:700;line-height:1;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.pres-reunion label:hover{border-color:var(--olive)}
.pres-reunion input:checked+label{background:var(--deep);color:var(--sand);
  border-color:transparent}
/* el foco se dibuja sobre la etiqueta porque el input está escondido */
.pres-reunion input:focus-visible+label{outline:2.5px solid var(--olive);outline-offset:2px}

/* ---- pie (mismo mecanismo que servicios.css: .panel__in>* empieza en
   opacity:0 en estilos.css y solo sube dentro de .drawer.open, que aquí
   no existe) ---- */
.svc-footer{margin-top:clamp(60px,8vw,110px)}
.svc-footer .panel{border-radius:34px 34px 0 0}
.svc-footer .panel__in{padding-top:40px}
.svc-footer .panel__in>*{opacity:1!important;transform:none!important}

@media (max-width:900px){
  .pres-grid{grid-template-columns:1fr}
  .pres-resumen{position:static}
}

/* Los controles se ajustan a la columna, no a su ancho intrínseco. */
.pres-field{min-width:0}
.pres-field input,.pres-field textarea{width:100%;min-width:0;max-width:100%;font-size:16px}
@media (max-width:600px){
  .pres-form{padding:26px 20px}
}