


#pedido-real .form-wrap{max-width:760px;margin:0 auto}

#pedido-real .form-grupo{margin-bottom:32px}
#pedido-real .form-grupo:last-child{margin-bottom:0}


#pedido-real .form-titulo,
#pedido-real .form-wrap > .label{
  display:block;font-family:var(--texto);
  font-size:var(--t6);letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--rojo);margin:0 0 22px;padding-bottom:12px;
  border-bottom:1px solid var(--crema2)}


#pedido-real .form-label{
  font-size:var(--t6);
  letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--gris);
  margin-bottom:9px;display:block;line-height:1.4}


#pedido-real input[type=text],
#pedido-real input[type=email],
#pedido-real input[type=tel],
#pedido-real input[type=number],
#pedido-real textarea,
#pedido-real select{
  width:100%;
  font-family:var(--sistema);
  font-size:var(--t5);
  font-weight:400;color:var(--negro);
  padding:15px 16px;
  border:1px solid var(--crema2);border-radius:3px;
  background:var(--blanco);
  transition:border-color .15s}
#pedido-real input:focus,
#pedido-real textarea:focus,
#pedido-real select:focus{outline:none;border-color:var(--dorado);
  box-shadow:0 0 0 3px rgba(117,84,25,.10)}
#pedido-real textarea{min-height:110px;line-height:1.6;resize:vertical}
#pedido-real input[type=number]{max-width:110px}



#pedido-real .form-fila{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:24px}
@media(min-width:640px){
  #pedido-real .form-fila{grid-template-columns:1fr 1fr}
  #pedido-real .form-fila.entera{grid-template-columns:1fr}
}
#pedido-real .form-campo{margin-bottom:0}


#pedido-real .check-item{
  display:flex;align-items:center;gap:12px;
  padding:15px 16px;margin-bottom:10px;
  border:1px solid var(--crema2);border-radius:3px;background:var(--blanco);
  font-size:var(--t5);line-height:1.5;cursor:pointer;transition:border-color .15s}
#pedido-real .check-item:hover{border-color:var(--dorado)}
#pedido-real .check-item input[type=checkbox],
#pedido-real .check-item input[type=radio]{
  width:19px;height:19px;flex:0 0 auto;accent-color:var(--rojo);cursor:pointer}
#pedido-real .check-grid{display:grid;gap:0}


#pedido-real #resumen,
#pedido-real .resumen{background:var(--crema);border:1px solid var(--crema2);
  border-radius:3px;padding:26px 28px;font-size:var(--t5);line-height:1.9}
#pedido-real #resumen-total{font-size:var(--t3);font-weight:600;color:var(--negro)}





#pedido-real .carrito-resumen{margin:0 0 44px;padding:26px 28px}
#pedido-real .carrito-linea{padding:16px 0;font-size:var(--t5)}
#pedido-real .carrito-linea small{margin-top:4px}
#pedido-real .carrito-extra{padding:10px 0 20px}
#pedido-real .carrito-cambiar{margin:26px 0 6px;padding:14px 26px}
#pedido-real .carrito-quita{padding:4px 0}


#pedido-real .resumen-arriba{margin:0 0 44px;padding:26px 28px}
#pedido-real .resumen-arriba .resumen-titulo{margin-bottom:18px}


#pedido-real .resumen-item{display:flex;align-items:baseline;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--crema2)}
#pedido-real .resumen-item span:first-child{flex:1 1 auto}
#pedido-real .resumen-item:last-of-type{border-bottom:none}

#pedido-real .carrito-quita{flex:0 0 auto;background:transparent;border:none;cursor:pointer;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--gris);padding:0;margin:-10px -12px -10px 0;transition:color .15s}
#pedido-real .carrito-quita:hover{color:var(--rojo)}
#pedido-real .carrito-quita:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}


#pedido-real .carrito-envio-aviso{margin:14px 0 0;font-family:var(--texto);
  font-size:var(--t5);line-height:1.6;color:var(--gris)}
#pedido-real .carrito-envio-aviso b{color:var(--negro);font-weight:600}


#pedido-real .total-junto-al-boton{margin:0 0 12px;font-family:var(--titulos);
  font-size:var(--t3);font-weight:600;color:var(--negro);text-align:center;line-height:1.4}
#pedido-real .total-junto-al-boton .nota-total{display:block;font-family:var(--texto);
  font-size:var(--t6);font-weight:400;color:var(--gris);margin-top:4px}


#pedido-real .bloque-cabecera{display:flex;align-items:center;gap:16px;
  margin:56px 0 28px;padding-top:30px;border-top:1px solid var(--crema2)}
#pedido-real .bloque-cabecera:first-of-type{margin-top:44px}
#pedido-real .bloque-num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--rojo);color:var(--blanco);display:inline-flex;
  align-items:center;justify-content:center;
  font-family:var(--texto);font-size:var(--t5);font-weight:600;line-height:1}
#pedido-real .bloque-titulo{margin:0;font-family:var(--titulos);font-size:var(--t3);
  font-weight:500;color:var(--negro)}


#pedido-real .form-sublabel{font-family:var(--texto);font-size:var(--t6);
  letter-spacing:var(--sp-rotulo);text-transform:uppercase;font-weight:600;
  color:var(--gris);margin:0 0 18px}


#pedido-real ~ nav .nav-volver, nav .nav-volver{
  border:1px solid var(--crema2);padding:9px 20px;border-radius:3px;
  color:var(--gris);transition:border-color .15s,color .15s}
nav .nav-volver:hover{border-color:var(--rojo);color:var(--rojo)}


.volver-web{display:inline-block;margin:0 0 30px;font-size:var(--t6);
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--gris);text-decoration:none;border-bottom:1px solid var(--crema2);
  padding-bottom:4px}
.volver-web:hover{color:var(--rojo);border-color:var(--rojo)}


#pedido-real .form-ayuda{margin:-8px 0 10px;font-family:var(--texto);
  font-size:var(--t6);color:var(--gris);line-height:1.5}
#pedido-real .form-textarea + .form-ayuda{margin:8px 0 0}


.opcion-pago,#pedido-real .opcion-pago{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--crema2);cursor:pointer}
.opcion-pago.sin-raya,#pedido-real .opcion-pago.sin-raya{border-bottom:none}
.radio-pago,#pedido-real .radio-pago{margin-top:4px;accent-color:var(--rojo);width:18px;height:18px;flex-shrink:0}
.nombre-pago,#pedido-real .nombre-pago{color:var(--negro)}

.fila-eleccion,#pedido-real .fila-eleccion{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.campo-inicial,#pedido-real input.campo-inicial{max-width:180px;font-family:var(--texto);font-size:var(--t3);
  text-align:center;letter-spacing:.1em}
.nota-ayuda,#pedido-real .nota-ayuda{font-size:var(--t6);color:var(--gris);margin-top:8px}

.aire-6,#pedido-real .aire-6{margin-bottom:6px}

.aire-14,#pedido-real .aire-14{margin-bottom:14px}
.aire-16,#pedido-real .aire-16{margin-bottom:16px}

.apunte-suave,#pedido-real .apunte-suave{font-weight:normal;font-size:var(--t6)}
.texto-coleccion,#pedido-real .texto-coleccion{font-size:var(--t5);color:var(--gris);line-height:1.85}
.enlace-coleccion,#pedido-real .enlace-coleccion{font-size:var(--t6);letter-spacing:.06em;margin-top:12px;margin-left:6px}
.titulo-receptor,#pedido-real .titulo-receptor{font-size:var(--t6);font-weight:700;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;
  letter-spacing:.08em;color:var(--rojo);margin:32px 0 20px;
  border-top:1px solid var(--crema2);padding-top:24px}
.lista-metodos,#pedido-real .lista-metodos{font-size:var(--t5);color:var(--gris);margin-bottom:20px}
.texto-paypal,#pedido-real .texto-paypal{font-size:var(--t5);color:var(--gris);line-height:1.7;margin-bottom:14px}
.nota-paypal,#pedido-real .nota-paypal{font-size:var(--t6);color:var(--gris);line-height:1.7;margin-top:10px}
.fila-boletin,#pedido-real .fila-boletin{margin-top:24px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px}
.check-boletin,#pedido-real .check-boletin{width:20px;height:20px;accent-color:var(--rojo);cursor:pointer;
  flex-shrink:0;margin-top:3px}
.texto-boletin,#pedido-real .texto-boletin{font-size:var(--t5);color:var(--gris);cursor:pointer;line-height:1.6}
.senala,#pedido-real .senala{cursor:pointer}
.btn-ancho,#pedido-real .btn-ancho{width:100%;margin-top:8px}


.trampa-robots,#pedido-real input.trampa-robots{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}


.destaca-rojo,#pedido-real .destaca-rojo{color:var(--rojo);font-weight:600}
.foto-mini,#pedido-real .foto-mini{display:inline-block;position:relative;margin:0 10px 10px 0;vertical-align:top}
.foto-mini-img,#pedido-real .foto-mini-img{width:62px;height:62px;object-fit:cover;border-radius:3px;display:block}
.linea-foto,#pedido-real .linea-foto{margin:0 0 10px;font-size:var(--t5);color:var(--negro)}




.zona-paypal,#pedido-real .zona-paypal{margin-bottom:8px}
.aviso-falta,#pedido-real .aviso-falta{font-size:var(--t5);
  line-height:1.7;margin-bottom:4px}
.caja-foto-pedido,#pedido-real .caja-foto-pedido{margin-top:14px;padding:14px 16px;
  border:1px solid var(--crema2);border-radius:3px;background:var(--crema)}

.destaca-rojo-normal,#pedido-real .destaca-rojo-normal{color:var(--rojo)}
.foto-mini-cifra,#pedido-real .foto-mini-cifra{position:absolute;bottom:2px;right:2px;
  background:rgba(0,0,0,.6);color:#fff;font-size:var(--t6);padding:0 4px;border-radius:3px}
.foto-mini-quita,#pedido-real .foto-mini-quita{position:absolute;top:-8px;right:-8px;
  width:22px;height:22px;border-radius:50%;border:none;background:var(--rojo);
  color:#fff;font-size:var(--t6);line-height:1;cursor:pointer}


/* ═══════════════════════════════════════════════════════════════════════════
   LA PÁGINA DE PEDIDO, PUESTA DERECHA. 17/8/2026.
   ═══════════════════════════════════════════════════════════════════════════
   Tres cosas que se veían mal justo donde se paga. Las midió Fable después de
   que Eva dijera, con razón, que ya no se fiaba de que yo mirase.

   1 · LA BANDA DE COLOR NO LLEGABA A LOS BORDES
       El margen lateral estaba puesto por fuera de la sección, así que el
       fondo crema se quedaba corto: 24 px de blanco por lado en un portátil
       y 253 px en un monitor de 1920, donde parecía una caja suelta.
       Ahora el margen va DENTRO, con la misma medida que el resto de la web
       (la variable --margen-lado de estilo.css: 24 px en móvil, crece con la
       pantalla, y a partir de 1400 px de ancho lo que sobre).

   2 · EL TÍTULO IBA POR SU CUENTA
       "Tu pedido" empezaba pegado a la izquierda mientras el formulario
       estaba centrado más adentro: parecían dos cosas descolocadas. Ahora el
       título, su bajada y el cartel de tienda cerrada comparten la MISMA
       columna que el formulario. En un móvil no cambia nada, porque ahí esa
       columna no cabe y no llega a actuar.

   3 · LAS CASILLAS DE CANTIDAD BAILABAN
       Cada casilla de "uds" caía donde acababa el nombre de su vela, así que
       ninguna coincidía con la de arriba. Ahora todas se van al mismo sitio,
       al borde derecho de su caja, y quedan en columna.
   ═══════════════════════════════════════════════════════════════════════════ */

#pedido-real .seccion{
  padding-left:var(--margen-lado);
  padding-right:var(--margen-lado);
}

#pedido-real .titulo-seccion,
#pedido-real .subtitulo-seccion,
#pedido-real .cartel-cerrada{max-width:760px;margin-left:auto;margin-right:auto}

#pedido-real .check-item .check-cantidad{margin-left:auto}

/* EL CODIGO DE LA PRIMERA COMPRA (9/9/2026, Eva: "yo quiero esto"). La casilla
   va debajo de la bolsa de regalo; el servidor es quien decide si vale. */
#pedido-real .fila-codigo{display:flex;gap:18px;align-items:flex-end;max-width:440px}
#pedido-real .fila-codigo .form-input{flex:1 1 auto;text-transform:uppercase}
#pedido-real .boton-codigo{margin-top:0;padding:10px 24px;white-space:nowrap;font-size:var(--t5)}
#pedido-real .codigo-msg{min-height:22px;margin-top:10px}
#pedido-real .codigo-msg.ok{color:var(--verde);font-style:normal}
#pedido-real .codigo-msg.mal{color:var(--rojo);font-style:normal}
#pedido-real .resumen-item.descuento span{color:var(--verde)}
