/* flots · css/paginas/pedido.css
   Pedido (/pedido/1, /2, /3, /enviado) — Main, Paso2, Paso3, Enviado (desktop 1440) y MForm (celular 390).
   Desktop: columna izquierda de 600 px (fondo --bg) + columna blanca del formulario.
   Tablet (≤1199): las columnas se apilan. Celular (≤767): markup propio (.pedido-celu, MForm). */

/* =========================== Desktop =========================== */
.pedido{
  display:flex;
  justify-content:center;
  min-height:calc(100vh - var(--alto-banner));
  /* Más allá de 1440 px la columna blanca sigue hasta el borde derecho y el fondo gris hasta el izquierdo */
  background:linear-gradient(90deg, var(--bg) 50%, var(--surface) 50%);
}
.pedido-marco{
  position:relative;
  display:flex;
  flex:1 1 auto;
  width:100%;
  max-width:1440px;
}
.pedido-idioma{
  position:absolute;
  top:36px;
  right:72px;
  z-index:5;
}

/* Columna izquierda: logo arriba, título al medio, pie abajo (queda fija mientras baja el formulario) */
.pedido-lateral{
  /* 600 px con padding 72/80 a 1440 (artboard); entre 1200 y 1440 se achica en proporción */
  --pedido-lat-pad:clamp(56px, 5.56vw, 80px);
  position:sticky;
  top:var(--alto-banner);
  align-self:flex-start;
  flex:0 0 clamp(480px, 41.67vw, 600px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
  width:clamp(480px, 41.67vw, 600px);
  height:calc(100vh - var(--alto-banner));
  padding:72px var(--pedido-lat-pad);
  background:var(--bg);
}
.pedido-logo{ align-self:flex-start; display:inline-flex; text-decoration:none; color:var(--ink); }
.pedido-intro{ display:flex; flex-direction:column; gap:28px; }
/* En el diseño el H1 (505 px a 104 px) es más ancho que el contenido de la columna (440 px):
   ocupa también el padding derecho, así "tu proyecto" / "your project" no se cortan. */
.pedido-h1{ width:max-content; max-width:calc(100% + var(--pedido-lat-pad, 80px)); }
.pedido-bajada{ max-width:400px; }
.pedido-pie{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:15px;
  line-height:1.35;
  color:var(--muted);
}
.pedido-pie-agenda{ margin-top:14px; color:var(--ink); }
.pedido-pie-agenda a{ font-weight:500; }

/* Columna derecha (blanca) */
.pedido-panel{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:72px clamp(48px, 6.67vw, 96px);
  background:var(--surface);
}
.pedido-panel-1{ gap:36px; }
.pedido-panel-enviado{ justify-content:center; gap:40px; }

.pedido-form{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:32px;
  min-width:0;
}
.pedido-form-1{ gap:36px; }

/* Bloques del paso 2 */
.pedido-bloque{ display:flex; flex-direction:column; gap:20px; }
.pedido-bloque-general{ padding-top:28px; border-top:1px solid var(--line-list); }
.pedido-bloque-titulo{ margin:0; font-size:20px; font-weight:500; line-height:1.25; }

/* Grupos de opciones: Paso 1 → tarjetas de 56 px con gap 12; Paso 2/3 → 52 px con gap 10 */
.pedido-opciones{ gap:10px; }
.pedido-opciones.pedido-opciones-alta{ gap:12px; }
fieldset.pedido-tres > legend.campo-etiqueta,
fieldset.pedido-logos > legend.campo-etiqueta{ margin-bottom:8px; }
.pedido-logos .subir{ min-height:88px; }
.pedido-cargando{ justify-content:flex-start; padding:12px 0; }

/* Acciones (Volver / Siguiente) */
.pedido-acciones{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-top:auto;
  padding-top:4px;
}
.pedido-acciones-solo{ justify-content:flex-end; }
.pedido-volver{ font-size:16px; }

/* Error al enviar */
.pedido-error-envio:focus{ outline:none; }
.pedido-error-envio:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Honeypot (campo `website`): fuera de la vista, sin display:none */
.pedido-trampa{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Enviado */
.pedido-enviado-titulo{ margin:0; font-size:32px; font-weight:400; line-height:1.15; letter-spacing:-0.02em; }
.pedido-proximos{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.pedido-proximos > li{
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  padding:28px 0;
  border-top:1px solid var(--line-list);
}
.pedido-proximos > li:first-child{ border-top-color:var(--ink); }
.pedido-proximos > li:last-child{ border-bottom:1px solid var(--line-list); }
.pedido-proximos-num{ font-size:20px; line-height:1.3; color:var(--accent); }
.pedido-proximos-textos{ display:flex; flex-direction:column; gap:6px; }
.pedido-proximos-titulo{ font-size:20px; font-weight:500; line-height:1.3; }
.pedido-proximos-texto{ font-size:16px; line-height:1.45; color:var(--muted); }
.pedido-instagram{ align-self:flex-start; font-size:16px; }

/* Pantallas bajas: la columna izquierda deja de quedar fija para no cortarse */
@media (min-width: 1200px) and (max-height: 720px){
  .pedido-lateral{ position:static; align-self:stretch; height:auto; }
}

/* =========================== Tablet (≤1199): columnas apiladas =========================== */
@media (max-width: 1199px){
  .pedido{ background:var(--bg); }
  .pedido-marco{ flex-direction:column; }
  .pedido-idioma{ top:32px; right:var(--gutter); }
  .pedido-lateral{
    position:static;
    align-self:stretch;
    flex:none;
    width:auto;
    height:auto;
    justify-content:flex-start;
    gap:32px;
    padding:32px var(--gutter) 40px;
  }
  .pedido-h1{ width:auto; }
  .pedido-intro{ gap:20px; }
  .pedido-pie{ flex-direction:row; flex-wrap:wrap; gap:4px 20px; }
  .pedido-pie-agenda{ margin-top:0; }
  .pedido-panel{ padding:48px var(--gutter) 64px; }
  .pedido-panel-enviado{ justify-content:flex-start; }
}

/* =========================== Celular (MForm) =========================== */
.pedido-celu{
  display:flex;
  flex-direction:column;
  gap:22px;
  min-width:0;
  padding:8px 20px calc(120px + env(safe-area-inset-bottom, 0px));
}
.pedido-celu-enviado{
  padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px));
  animation:flotsIn .4s ease-out 1;
}
.pedido-celu-h1{ line-height:.92; letter-spacing:-0.05em; }
/* MForm: 48 px en el formulario y 52 px en "recibí tu pedido" */
.pedido-celu-h1-hecho{ font-size:calc(var(--fs-display) + 4px); }

.pedido-celu .pedido-form{ gap:18px; }
.pedido-celu .campos-grilla{ gap:18px; }
.pedido-celu .pedido-bloque{ gap:18px; }
.pedido-celu .pedido-bloque-general{ padding-top:22px; }
.pedido-celu .pedido-bloque-titulo{ font-size:19px; }
fieldset.pedido-grupo-chips > legend.campo-etiqueta{ margin-bottom:8px; }
.pedido-celu .pedido-logos .subir{ min-height:80px; }
/* MForm: la caja de subida dice "Subir archivos" (el texto viene de --pedido-subir-texto).
   El texto original queda para lectores de pantalla y el visible no se lee dos veces. */
.pedido-logos-celu .subir > span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.pedido-logos-celu .subir::after{ content:var(--pedido-subir-texto, ""); }
@supports (content: "a" / ""){
  .pedido-logos-celu .subir::after{ content:var(--pedido-subir-texto, "") / ""; }
}

.pedido-celu-agenda{ margin:4px 0 0; font-size:14px; line-height:1.45; color:var(--muted); }
.pedido-celu-agenda a{ font-weight:500; }

/* Barra inferior fija: Volver / Siguiente (o Enviar pedido) */
.pedido-barra .pedido-siguiente{ height:52px; padding:0 28px; }
.pedido-barra-volver{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
}
.pedido-barra-volver:hover{ color:var(--muted); }
.pedido-barra-volver:disabled{ color:var(--disabled); cursor:default; }

/* Vista "recibí tu pedido" (MForm done) */
.pedido-hecho{ display:flex; flex-direction:column; gap:22px; }
.pedido-hecho-texto{ margin:0; font-size:16px; line-height:1.5; color:var(--muted); }
.pedido-hecho-lista{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  list-style:none;
  background:var(--surface);
}
.pedido-hecho-lista > li{
  display:grid;
  grid-template-columns:36px minmax(0, 1fr);
  padding:18px 16px;
  border-bottom:1px solid var(--line-soft);
}
.pedido-hecho-lista > li:last-child{ border-bottom:0; }
.pedido-hecho-num{ color:var(--accent); line-height:1.4; }
.pedido-hecho-textos{ display:flex; flex-direction:column; gap:4px; }
.pedido-hecho-titulo{ font-size:17px; font-weight:500; line-height:1.3; }
.pedido-hecho-sub{ font-size:14px; line-height:1.4; color:var(--muted); }
.pedido-hecho-instagram{ align-self:flex-start; font-size:15px; }
.pedido-hecho-volver{
  align-self:flex-start;
  font-size:14px;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
}
.pedido-hecho-volver:hover{ color:var(--ink); }