/* /comprar/ · el pedido. Inmersión sobria: negro, escala y nada que distraiga de
   terminar. El contrato del formulario no cambia. */
/* ── FORMULARIO · común a /comprar/ y /cotizar/ ─────────────────────────────
   Campos grandes, etiqueta siempre visible, foco blanco y error escrito debajo
   del campo. Letra de 18 px en los campos: por debajo, iPhone amplía la página
   al enfocar. Ningún nombre, id ni validación cambia: esto es solo aspecto. */
.cx{--cx-m:clamp(16px,3.4vw,48px)}
.cx p{font-size:1.0625rem;line-height:1.5}
.cx a{color:#fff;text-underline-offset:4px}
.cx .cx-lead{font-size:clamp(1.1875rem,1.6vw,1.4375rem);line-height:1.38}
.hidden{position:absolute;left:-9999px;opacity:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cx h1{font-size:clamp(3rem,6.2vw,6.6rem)}
.cx-h{font-size:clamp(2rem,3vw,2.875rem)!important;margin-bottom:10px!important}
.cx-sub{font:800 clamp(1.5rem,2vw,1.875rem)/1.05 "Barlow Condensed",sans-serif!important;text-transform:uppercase;margin:clamp(30px,5vh,44px) 0 16px!important;padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--pm-borde)}
.form-label{display:block;margin:0 0 8px;font:600 1.0625rem/1.3 Barlow,sans-serif;letter-spacing:0;text-transform:none;color:#fff}
.req{color:var(--pm-gris);font-weight:700}
.cx .form-input,.cx .form-select,.cx .form-textarea{width:100%;min-height:58px;padding:14px 16px;border-radius:0;background-color:#141414;border:1px solid #767676;color:#fff;font:400 1.125rem/1.35 Barlow,sans-serif;box-shadow:none;transition:border-color .15s,background-color .15s;color-scheme:dark}
.cx .form-select{padding-right:44px;background-position:right 18px center;background-size:12px 8px}
.cx .form-textarea{min-height:128px;resize:vertical}
.cx .form-input::placeholder,.cx .form-textarea::placeholder{color:#A8A8A8;opacity:1}
.cx .form-input:hover,.cx .form-select:hover,.cx .form-textarea:hover{border-color:#fff}
.cx .form-input:focus,.cx .form-select:focus,.cx .form-textarea:focus{outline:3px solid #fff;outline-offset:2px;border-color:#fff;background-color:#1C1C1C;box-shadow:none}
.cx .form-input:disabled,.cx .form-select:disabled{background-color:#0B0B0B;border-color:#3A3A3A;color:#9A9A9A;cursor:not-allowed}
.form-row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.form-group{margin:0 0 20px;min-width:0}
.form-ayuda,.cx .fine{font:400 1.0625rem/1.45 Barlow,sans-serif;color:var(--pm-gris)}
.form-ayuda{margin:8px 0 0}
.cx input[type=checkbox]{width:24px;height:24px;flex:none;margin:1px 0 0;accent-color:var(--pm-rojo);cursor:pointer}
.cx input[type=checkbox]:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Error: se escribe debajo del campo que falla */
.cx .cx-mal{border-color:#FF6B55!important;box-shadow:inset 3px 0 0 #FF6B55!important}
.cx .cx-error{display:flex;gap:8px;margin:8px 0 0;color:#FF8E7C;font:600 1.0625rem/1.35 Barlow,sans-serif}
.cx .cx-error[hidden]{display:none}
.cx-resumen-error{margin:14px 0 0;padding:12px 14px;border:1px solid #FF6B55;color:#fff;font:600 1.0625rem/1.4 Barlow,sans-serif}
.cx-resumen-error[hidden]{display:none}
/* El WhatsApp flotante no tapa el campo que se está escribiendo */
body.cx-escribiendo .wa-float,body.cx-en-form .wa-float{opacity:0;pointer-events:none}
@media (max-width:640px){.form-row-2{grid-template-columns:minmax(0,1fr)}}

/* Cabecera */
.cp-pag.form-page{padding:clamp(104px,15vh,150px) var(--cx-m) clamp(60px,10vh,110px)}
.cp-cab{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(36px,7vh,76px)}
.cp-cab .cx-lead{margin-top:20px;max-width:34em}
.cp .cp-nopago{margin-top:14px;color:var(--pm-gris);max-width:40em}
.compra-prueba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.compra-prueba figure{margin:0}
.compra-prueba img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.compra-prueba figcaption{margin-top:8px;font-size:1.0625rem;line-height:1.3}

/* Dos columnas: el orden visual es el orden del teclado */
.cp-ret{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(0,1.3fr);gap:clamp(30px,5vw,90px);align-items:start;border-top:1px solid var(--pm-borde);padding-top:clamp(30px,5vh,52px)}
@media (min-width:1101px) and (min-height:880px){.cp-pedido{position:sticky;top:84px}}
.cart-line{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 16px;align-items:center;padding:6px 0 16px}
.cp-prod{width:150px;height:auto;grid-row:1/3}
.ci-title{font:800 1.375rem/1.1 "Barlow Condensed",sans-serif;text-transform:uppercase}
.ci-sku{margin-top:4px;font-size:1.0625rem;color:var(--pm-gris)}
.cart-line__precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.price-big{font:800 2.5rem/1 "Barlow Condensed",sans-serif;color:#fff}
.price-was{font-size:1.0625rem;color:#fff}
.ci-price{color:var(--pm-gris);margin-bottom:6px!important}
.qty-row{margin:16px 0 0}
.qty-row[hidden]{display:none}
.qty-input.form-input{max-width:130px}
.kit-add{display:flex;gap:14px;align-items:flex-start;margin:14px 0 0;padding:15px 16px;border:1px solid var(--pm-borde);cursor:pointer;transition:border-color .15s}
.kit-add:hover,.kit-add:has(input:checked){border-color:#fff}
.kit-txt{font-size:1.0625rem;line-height:1.4;color:var(--pm-gris)}
.kit-txt b{color:#fff;font-weight:700}
#pedido-detail{margin-top:16px}
#pedido-detail[hidden]{display:none}
.sum-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--pm-borde)}
.sum-row[hidden]{display:none}
.sum-k{font-size:1.0625rem;color:var(--pm-gris)}
.sum-v{font-size:1.0625rem;font-weight:600;color:#fff;text-align:right;overflow-wrap:anywhere}
.sum-row.total{border-bottom:0;padding-top:16px;align-items:baseline}
.sum-row.total .sum-k{color:#fff;font-weight:700}
.sum-row.total .sum-v{font:800 clamp(2rem,3vw,2.75rem)/1 "Barlow Condensed",sans-serif}
.pay-note{font-size:1.0625rem;color:var(--pm-gris)}
.cp .cp-tel{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin-top:18px;padding-top:12px;border-top:1px solid var(--pm-borde)}
.cp .hero-tel{margin:0;font:700 1.0625rem/1.3 Barlow,sans-serif;letter-spacing:0;min-height:44px;color:#fff}
.cp .hero-tel .tel-horario{font-size:1.0625rem;font-weight:400;color:var(--pm-gris);letter-spacing:0}

/* Datos */
.cp .cp-datos__lead{margin-bottom:clamp(20px,3vh,30px)}
.cp .cx-nota{color:var(--pm-gris);margin:-6px 0 16px}
.install-extra{margin:clamp(24px,4vh,34px) 0 0;border:1px solid var(--pm-borde)}
.install-extra summary{cursor:pointer;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;font:700 1.125rem/1.25 Barlow,sans-serif;list-style:none}
.install-extra summary::-webkit-details-marker{display:none}
.install-extra summary::after{content:"+";font-size:1.75rem;line-height:1;color:#fff}
.install-extra[open] summary::after{content:"–"}
.install-extra summary:focus-visible{outline:3px solid #fff;outline-offset:2px}
.install-extra__in{padding:6px 16px 8px}
.install-extra__in .cx-sub:first-of-type{margin-top:18px}
.cp .cx-autoriza{display:flex;gap:14px;align-items:flex-start;margin-top:26px;cursor:pointer;color:#fff}
.cp .cx-autoriza a{color:#fff}
.cp .cx-total-final{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:22px;padding-top:14px;border-top:1px solid var(--pm-borde)}
.cx-total-final b{font:800 clamp(2rem,3vw,2.75rem)/1 "Barlow Condensed",sans-serif}
.btn-buy{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:66px;margin-top:14px;padding:12px 18px;border:1px solid var(--pm-rojo);background:var(--pm-rojo);color:#fff;font:700 1.25rem/1.15 Barlow,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-buy:hover{background:#fff;color:#000;border-color:#fff}
.btn-buy:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-buy svg{width:22px;height:22px;flex:none}
.cp .cx-enviado{margin-top:14px;padding:12px 14px;border:1px solid #fff;color:#fff;font-weight:700}
.cx-enviado[hidden]{display:none}
.cp .cx-pie{margin-top:14px}
.cp .cx-pie b{color:#fff;font-weight:600}

/* Dónde */
.cp-donde{padding:clamp(70px,12vh,140px) var(--cx-m);border-top:1px solid var(--pm-borde);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:end}
.cp-donde h2{font-size:clamp(2.6rem,5.2vw,5.4rem)}
.cp-donde__tx p+p{margin-top:14px;color:var(--pm-gris)}

@media (max-width:1100px){
  .cp-cab,.cp-ret,.cp-donde{grid-template-columns:minmax(0,1fr)}
  .compra-prueba{max-width:560px}
}
@media (max-width:640px){
  .cx h1{font-size:clamp(2.9rem,14vw,4.4rem)}
  .btn-buy{font-size:1.125rem}
}
.wa-float .wa-text,.wa-float{font-size:1.0625rem}
.compra-prueba figure:first-child img{object-position:50% 6%}
/* Tu pedido, en su propio panel */
@media (min-width:981px){.cp-pedido{border:1px solid #3A3A3A;background:#0c0c0c;padding:clamp(18px,2vw,28px);align-self:start}}

/* El formulario va en su panel, como los demás datos de la marca. */
#form-pedido{background:#101010;border:1px solid #3A3A3A;padding:clamp(18px,2.6vw,36px)}
.cp .cx-aviso{margin:0 0 18px;padding:14px 16px;border-left:3px solid var(--pm-rojo);background:#1C1C1C;color:#fff;font:600 1.0625rem/1.4 Barlow,sans-serif}
.cp .cx-aviso[hidden]{display:none}

/* Entrada de la compra */
.cp-ap{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#000;padding:clamp(100px,14vh,140px) clamp(16px,3.4vw,48px) clamp(40px,8vh,80px)}
.cp-ap__f{position:absolute;inset:-4%}
.cp-ap__f img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:.42;transform:scale(calc(1 + var(--z,0)*.12))}
.cp-ap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0,rgba(0,0,0,.62) 46%,rgba(0,0,0,.2) 100%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 34%);pointer-events:none}
.cp-ap__tx{position:relative;z-index:3;max-width:min(50vw,720px)}
.cp .cp-ap h1{font-size:clamp(3.2rem,6.6vw,7.2rem);line-height:.9}
.cp-ap .cx-lead{margin-top:clamp(14px,2.6vh,26px);max-width:32em}
.cp-ap .cp-nopago{margin:12px 0 clamp(18px,3vh,28px);max-width:34em}
.cp-ap__p{position:absolute;z-index:2;right:clamp(-30px,-1vw,0px);bottom:6%;width:min(50vw,calc(82svh*1.1));height:auto;filter:drop-shadow(0 34px 70px rgba(0,0,0,.8));transform:translateY(calc(var(--z,0)*-70px)) scale(calc(1 - var(--z,0)*.1));transform-origin:50% 100%}
.cp-ap+.cp-pag{padding-top:clamp(50px,8vh,90px);scroll-margin-top:70px}
#t-donde~.compra-prueba{margin-top:clamp(26px,5vh,50px)}
@media (max-width:980px){
  .cp-ap{display:block;min-height:0;padding:96px 16px 24px}
  .cp-ap__tx{max-width:none}
  .cp .cp-ap h1{font-size:clamp(2.8rem,12.6vw,5rem)}
  .cp-ap__p{position:relative;right:auto;bottom:auto;display:block;width:min(88vw,520px);margin:22px auto 0;transform:none}
}

/* La escena sigue detrás del formulario. */
.cp-pag{background:linear-gradient(rgba(0,0,0,.84),rgba(0,0,0,.84)),url(/assets/portada/comprar-fondo.webp) center top/cover no-repeat fixed}
#form-pedido{background:rgba(14,14,14,.86)}

.cp .cp-ap__p{width:min(52vw,calc(88svh*1.1))}
.pm-btn--blanco{background:#fff!important;border-color:#fff!important;color:#000!important}