/* Páginas públicas del cliente: formulario, gracias, seguimiento, cuenta y privacidad.
   Estilo limpio tipo Apple: fondo gris claro, tarjetas blancas sin bordes, azul para lo que se toca. */
:root {
  --fondo:#f5f5f7; --papel:#fff; --tinta:#1d1d1f; --suave:#6e6e73; --tenue:#86868b; --linea:#d2d2d7; --linea-suave:#e8e8ed;
  --campo:#fff; --marca:#154a2f; --acento:#1a6b45; --acento-hover:#1f7a50; --acento-suave:#e7f3ec; --acento-tinta:#fff; --enlace:#1a6b45;
  --ok:#1a7f45; --ok-suave:#e6f4ea; --peligro:#d70015; --peligro-suave:#fdecee; --aviso:#fff7e0; --aviso-tinta:#7a5200;
  --sombra:0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.05); --barra:rgba(251,251,253,.8);
  --r:18px; --r-campo:12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo:#000; --papel:#1c1c1e; --tinta:#f5f5f7; --suave:#a1a1a6; --tenue:#8d8d92; --linea:#424245; --linea-suave:#2c2c2e;
    --campo:#2c2c2e; --marca:#7fd4a6; --acento:#2fa36b; --acento-hover:#38b578; --acento-suave:#123222; --acento-tinta:#fff; --enlace:#5cc893;
    --ok:#30d158; --ok-suave:#0f2e1a; --peligro:#ff453a; --peligro-suave:#3a1210; --aviso:#2e2610; --aviso-tinta:#f1d68a;
    --sombra:none; --barra:rgba(22,22,23,.8);
    color-scheme: dark;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--fondo); color:var(--tinta);
  font:17px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Inter,Arial,sans-serif;
  letter-spacing:-.022em; -webkit-font-smoothing:antialiased; }
a { color:var(--enlace); text-decoration:none; }
a:hover { text-decoration:underline; }
[hidden] { display:none !important; }

/* ---------- Barra superior ---------- */
.barra { position:sticky; top:0; z-index:20; background:var(--barra); border-bottom:1px solid var(--linea-suave);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
.barra-dentro { max-width:1120px; margin:0 auto; height:52px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo { display:flex; align-items:center; gap:8px; color:var(--tinta); font-weight:600; font-size:17px; letter-spacing:-.02em; }
.logo:hover { text-decoration:none; }
.barra-enlaces { display:flex; align-items:center; gap:4px; }
.enlace-icono { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px; border-radius:980px; color:var(--tinta); font-size:14px; }
.enlace-icono:hover { background:var(--linea-suave); text-decoration:none; }
.enlace-icono svg, .pastilla-cuenta svg { width:20px; height:20px; flex:none; }
.pastilla-cuenta { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px 0 10px; margin-left:4px; border-radius:980px;
  background:var(--tinta); color:var(--fondo); font-size:14px; font-weight:500; }
.pastilla-cuenta:hover { text-decoration:none; opacity:.85; }
.solo-ancho { display:none; }
@media (min-width:760px) { .solo-ancho { display:inline; } }

/* ---------- Estructura ---------- */
.envoltura { max-width:640px; margin:0 auto; padding:28px 16px 56px; }
.envoltura.estrecha { max-width:680px; }
.cabecera-pagina { margin:8px 0 24px; }
.antetitulo { font-size:15px; font-weight:600; color:var(--acento); margin:0 0 6px; letter-spacing:-.01em; }
h1 { font-size:40px; line-height:1.08; font-weight:700; letter-spacing:-.035em; margin:0 0 10px; }
.intro { color:var(--suave); font-size:19px; line-height:1.4; margin:0; max-width:36em; }
h2 { font-size:22px; font-weight:700; letter-spacing:-.025em; color:var(--tinta); margin:0 0 14px; }

/* Pasos del pedido */
.pasos-pedido { list-style:none; display:grid; grid-template-columns:1fr; gap:10px; margin:24px 0 28px; padding:0; }
.pasos-pedido li { display:flex; gap:12px; align-items:flex-start; background:var(--papel); border-radius:var(--r); padding:14px 16px; box-shadow:var(--sombra); }
.pasos-pedido b { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--acento-suave); color:var(--acento); font-size:14px; }
.pasos-pedido span { font-size:15px; line-height:1.35; }
.pasos-pedido small { display:block; color:var(--suave); font-size:13px; margin-top:2px; }
@media (min-width:760px) { .pasos-pedido { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.tarjeta, fieldset.producto { background:var(--papel); border:0; border-radius:var(--r); padding:22px 20px; margin:0 0 16px; min-width:0; box-shadow:var(--sombra); }
.cab-producto { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
legend { float:left; padding:0; font-weight:700; font-size:21px; letter-spacing:-.025em; }
.quitar { border:0; background:none; color:var(--peligro); font:inherit; font-size:15px; cursor:pointer; padding:6px 0 6px 10px; }
.un-producto .quitar { display:none; }

/* ---------- Campos ---------- */
label, .etiqueta { display:block; font-size:14px; font-weight:500; color:var(--tinta); margin-bottom:7px; letter-spacing:-.01em; }
input[type=text],input[type=tel],input[type=url],input[type=email],select,textarea {
  width:100%; font:inherit; font-size:17px; letter-spacing:-.02em; min-height:48px; padding:11px 14px;
  border:1px solid var(--linea); border-radius:var(--r-campo); background:var(--campo); color:var(--tinta);
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
input::placeholder, textarea::placeholder { color:var(--tenue); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--acento); box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 22%,transparent); }
button:focus-visible, a:focus-visible, .opcion input:focus-visible + span, .tipo-op input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--acento) 55%,transparent); outline-offset:2px; }
textarea { min-height:96px; resize:vertical; }
input[type=file] { font:inherit; font-size:15px; max-width:100%; color:var(--suave); }
input[type=file]::file-selector-button { font:inherit; font-size:15px; font-weight:500; margin-right:12px; padding:9px 16px; border:0; border-radius:980px;
  background:var(--acento); color:#fff; cursor:pointer; }
input[type=file]::file-selector-button:hover { background:var(--acento-hover); }
.rejilla { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; }
.rejilla .ancho { grid-column:1/-1; }
@media (max-width:520px) { .rejilla { grid-template-columns:1fr; } }

/* Tipo de producto: tarjetas */
.tipos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
@media (min-width:760px) { .tipos { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.tipo-op { position:relative; display:block; cursor:pointer; margin:0; }
.tipo-op input { position:absolute; opacity:0; pointer-events:none; }
.tipo-op span { display:block; height:100%; padding:14px; border:1.5px solid var(--linea); border-radius:14px; background:var(--campo); transition:border-color .15s, background .15s; }
.tipo-op b { display:block; color:var(--tinta); font-size:16px; font-weight:600; }
.tipo-op small { display:block; color:var(--suave); font-size:13px; margin-top:2px; line-height:1.3; }
.tipo-op:hover span { border-color:var(--tenue); }
.tipo-op input:checked + span { border:2px solid var(--acento); padding:13.5px; background:var(--acento-suave); }

/* Pastillas (versión, manga, corte) */
.pastillas { display:flex; flex-wrap:wrap; gap:8px; }
.opcion { position:relative; margin:0; cursor:pointer; font-weight:400; }
.opcion input { position:absolute; opacity:0; pointer-events:none; }
.opcion span { display:inline-block; padding:9px 16px; border:1.5px solid var(--linea); border-radius:980px; font-size:15px; color:var(--tinta); background:var(--campo); transition:all .15s; }
.opcion:hover span { border-color:var(--tenue); }
.opcion input:checked + span { border-color:var(--acento); background:var(--acento); color:#fff; font-weight:500; }

/* Foto + autorrelleno */
.zona-foto { border:1.5px dashed var(--linea); border-radius:14px; padding:16px; margin-bottom:18px; background:color-mix(in srgb,var(--fondo) 60%,var(--papel)); }
.zona-foto .ayuda { font-size:14px; color:var(--suave); margin:10px 0 0; line-height:1.4; }
.estado-ia { font-size:15px; line-height:1.4; margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--acento-suave); color:var(--tinta); }
.estado-ia.cargando { color:var(--suave); }
.estado-ia.error { background:var(--aviso); color:var(--aviso-tinta); }
.estado-ia.pregunta { background:var(--papel); border:2px solid var(--acento); }
.pregunta-titulo { margin:0 0 6px; font-weight:600; }
.estado-ia ol { margin:0 0 12px; padding-left:22px; }
.estado-ia ol li { margin:3px 0; }
.estado-ia ol small { color:var(--suave); }
.pregunta-botones { display:flex; gap:8px; flex-wrap:wrap; }
.autorelleno { border-color:var(--acento) !important; background:var(--acento-suave) !important; }
.miniaturas { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.miniaturas img { width:64px; height:64px; object-fit:cover; border-radius:10px; background:var(--papel); box-shadow:0 0 0 1px var(--linea-suave); }
.aviso-fotos { margin:8px 0 0; }

/* Aviso del dorsal */
.aviso-dorsal { grid-column:1/-1; background:var(--aviso); color:var(--aviso-tinta); border-radius:12px; padding:12px 14px; font-size:15px; line-height:1.4; }
.aviso-dorsal strong { display:block; margin-bottom:2px; }
.vista-dorsal { grid-column:1/-1; font-size:15px; color:var(--suave); }
.vista-dorsal b { display:inline-block; margin-left:6px; padding:4px 12px; border-radius:8px; background:var(--tinta); color:var(--fondo); letter-spacing:.08em; }

.precio { display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; padding-top:16px; border-top:1px solid var(--linea-suave); }
.precio .pequeno { font-size:15px; }
.precio .cifra { font-weight:600; font-size:21px; font-variant-numeric:tabular-nums; }
.precio .consultar { font-weight:500; color:var(--suave); }
.total { display:flex; justify-content:space-between; align-items:baseline; font-size:17px; font-weight:500; }
.total .cifra { font-size:28px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.total .tachado { text-decoration:line-through; color:var(--suave); font-weight:400; font-size:17px; margin-right:8px; }

/* ---------- Botones ---------- */
.boton { display:inline-flex; justify-content:center; align-items:center; gap:6px; font:inherit; font-size:15px; font-weight:500; min-height:40px; padding:9px 18px;
  border-radius:980px; border:0; background:var(--linea-suave); color:var(--tinta); cursor:pointer; text-decoration:none; transition:background .15s, opacity .15s; }
.boton:hover { text-decoration:none; filter:brightness(.97); }
.boton.azul, .boton.principal { background:var(--acento); color:var(--acento-tinta); }
.boton.azul:hover, .boton.principal:hover { background:var(--acento-hover); filter:none; }
.boton.gris { background:var(--linea-suave); color:var(--tinta); }
.boton.principal { width:100%; min-height:54px; font-size:17px; font-weight:600; }
.boton.otra { width:100%; min-height:54px; margin-bottom:16px; background:var(--papel); color:var(--acento); font-size:17px; box-shadow:var(--sombra); }
form.reduciendo .boton.principal { opacity:.55; }

.errores { background:var(--peligro-suave); color:var(--tinta); border-radius:var(--r); padding:16px 18px; margin:0 0 20px; }
.errores strong { color:var(--peligro); }
.errores ul { margin:6px 0 0; padding-left:20px; }
.pequeno { font-size:14px; color:var(--suave); line-height:1.4; }
.check { display:flex; gap:12px; align-items:flex-start; font-size:15px; font-weight:400; color:var(--tinta); line-height:1.4; margin:0; cursor:pointer; }
.check input { margin-top:1px; width:22px; height:22px; flex:none; accent-color:var(--acento); }
.trampa { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.nota-fotos { margin:8px 0 0; } .nota-envio { margin:12px 0 0; } .centrado { text-align:center; margin-top:12px; }
.saludo { background:var(--acento-suave); border-radius:14px; padding:12px 16px; margin:0 0 20px; font-size:16px; }
.espacio { height:16px; }
.cupon-fila { display:flex; gap:8px; }
.cupon-fila input { flex:1; text-transform:uppercase; letter-spacing:.06em; }
.cupon-fila .boton { min-height:48px; }
.cupon-estado { margin:10px 0 0; font-size:15px; }
.cupon-estado.ok { color:var(--ok); font-weight:500; }
.cupon-estado.mal { color:var(--peligro); }
.borrador { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; background:var(--aviso); color:var(--aviso-tinta);
  border-radius:14px; padding:12px 16px; margin-bottom:20px; font-size:15px; }
.borrador button { font:inherit; background:none; border:0; text-decoration:underline; color:inherit; cursor:pointer; }

/* ---------- Gracias ---------- */
.gracias { text-align:center; padding:40px 24px 32px; }
.gracias .check-grande { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--ok-suave); color:var(--ok); }
.gracias .check-grande svg { width:32px; height:32px; }
.gracias h1 { font-size:34px; }
.num-grande { font-size:44px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:6px 0 4px; }
.gracias p { margin:0 auto 12px; max-width:30em; }
.gracias .boton { margin:10px 4px 0; }

/* ---------- Cuenta del cliente ---------- */
.centro-google { display:flex; flex-direction:column; align-items:center; gap:12px; padding:32px 16px; }
#boton-google { min-height:44px; max-width:100%; overflow:hidden; }
#boton-google svg { width:18px; height:18px; }
#boton-google.sc-oculto { display:none; }
.fila-pedido { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.num-pedido { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; }
.lista-productos { margin:12px 0 10px; padding-left:20px; }
.lista-productos li { margin-bottom:4px; }
.chip-cliente { font-size:13px; font-weight:600; padding:4px 11px; border-radius:980px; background:var(--linea-suave); }
.chip-cliente.e-consultando { background:#fff3d6; color:#7a5200; }
.chip-cliente.e-presupuestado { background:#e8f1fc; color:#0055b3; }
.chip-cliente.e-pagado, .chip-cliente.e-enviado { background:#e6f4ea; color:#1a7f45; }
.chip-cliente.e-en_camino { background:#e3f4fb; color:#00618a; }
.chip-cliente.e-entregado { background:#e6f4ea; color:#1a7f45; }
.chip-cliente.e-cancelado { background:#fdecee; color:#b0000f; }
@media (prefers-color-scheme: dark) { .chip-cliente[class*=" e-"] { background:var(--linea-suave); color:var(--tinta); } }
.salir { margin-top:20px; }

/* ---------- Seguimiento ---------- */
.pasos { list-style:none; margin:0; padding:0; }
.pasos li { position:relative; padding:0 0 18px 34px; color:var(--suave); }
.pasos li::before { content:""; position:absolute; left:6px; top:4px; width:14px; height:14px; border-radius:50%; border:2px solid var(--linea); background:var(--papel); }
.pasos li::after { content:""; position:absolute; left:13px; top:22px; bottom:0; width:2px; background:var(--linea-suave); }
.pasos li:last-child::after { display:none; }
.pasos li.hecho { color:var(--tinta); }
.pasos li.hecho::before { background:var(--acento); border-color:var(--acento); }
.pasos li.actual { color:var(--tinta); font-weight:600; }
.pasos li.actual::before { border-color:var(--acento); box-shadow:0 0 0 5px color-mix(in srgb,var(--acento) 22%,transparent); }
.pasos li span { display:block; font-size:15px; font-weight:400; color:var(--suave); margin-top:2px; }
.seguimiento-num { font-size:22px; letter-spacing:.03em; font-variant-numeric:tabular-nums; user-select:all; }
.foto-envio { display:block; max-width:100%; border-radius:14px; margin-top:10px; }
.texto-legal p { margin:0 0 14px; line-height:1.55; } .texto-legal p:last-child { margin:0; }

/* ---------- Pie ---------- */
.pie { border-top:1px solid var(--linea-suave); background:var(--fondo); }
.pie-dentro { max-width:1120px; margin:0 auto; padding:24px 16px 40px; font-size:13px; color:var(--suave); }
.pie-marca { font-weight:600; color:var(--tinta); font-size:15px; margin-bottom:8px; }
.pie-enlaces { display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:10px; }
.pie-enlaces a { color:var(--suave); font-size:14px; }
.pie-enlaces a:hover { color:var(--tinta); }
.pie p { margin:0; }

/* ---------- iPad ---------- */
@media (min-width:760px) {
  .envoltura { max-width:860px; padding:44px 28px 72px; }
  h1 { font-size:56px; }
  .gracias h1 { font-size:40px; }
  .rejilla.envio { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rejilla.envio .doble { grid-column:span 2; }
  .tarjeta, fieldset.producto { padding:26px 26px; }
}
/* ---------- Ordenador ---------- */
@media (min-width:1080px) {
  .envoltura { max-width:1120px; }
  .envoltura.estrecha { max-width:720px; }
  .columnas { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(360px,1fr); gap:24px; align-items:start; }
  .columnas .lado { position:sticky; top:72px; }
  .rejilla.envio { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rejilla.envio .doble { grid-column:1/-1; }
}
.espacio-arriba { margin-top:18px !important; }
.intro { margin-bottom:24px; }
.cabecera-pagina .intro { margin-bottom:0; }
.logo span { white-space:nowrap; }
.num-grande { font-variant-numeric:normal; }
@media (max-width:420px) {
  .barra-dentro { padding:0 12px; gap:6px; }
  .logo { font-size:16px; gap:6px; }
  .barra-enlaces { gap:0; }
  .enlace-icono { padding:0 7px; }
  .pastilla-cuenta { padding:0 12px 0 9px; margin-left:2px; }
}
@media (max-width:400px) {
  .pastilla-cuenta { width:34px; padding:0; justify-content:center; }
  .pastilla-cuenta span { display:none; }
}

/* ---------- Logo ---------- */
.logo { color:var(--marca); }
.logo-horizontal { display:block; height:26px; width:auto; }
.pie-marca .logo-horizontal { height:22px; color:var(--marca); }
.logo-redondo { display:block; color:var(--marca); }

/* Pantalla de entrada: el aro se dibuja, aparece el texto, pasa el barrido y bota el balón */
.intro-logo { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--fondo);
  animation:intro-fuera .45s ease 1.75s forwards; }
.intro-logo .logo-redondo { width:min(46vw,220px); height:auto; animation:intro-encoge .45s ease 1.75s forwards; }
.animado .l-aro { stroke-dasharray:1; stroke-dashoffset:1; animation:dibujar .9s cubic-bezier(.65,0,.35,1) .1s forwards; }
.animado .l-texto { opacity:0; transform:translateY(40px); transform-box:fill-box; animation:subir .55s cubic-bezier(.2,.8,.2,1) .45s forwards; }
.animado .l-barrido { transform:scaleX(0); transform-origin:0% 100%; transform-box:fill-box; animation:barrer .5s cubic-bezier(.2,.8,.2,1) .8s forwards; }
.animado .l-balon { transform:scale(0); transform-origin:center; transform-box:fill-box; animation:botar .55s cubic-bezier(.3,1.6,.5,1) 1.15s forwards; }
.sin-intro .intro-logo { display:none; }
@keyframes dibujar { to { stroke-dashoffset:0; } }
@keyframes subir { to { opacity:1; transform:none; } }
@keyframes barrer { to { transform:scaleX(1); } }
@keyframes botar { to { transform:scale(1); } }
@keyframes intro-fuera { to { opacity:0; visibility:hidden; } }
@keyframes intro-encoge { to { transform:scale(.92); } }

/* Pantalla de "enviando": el balón da vueltas alrededor del aro */
.cargando-pantalla { position:fixed; inset:0; z-index:90; display:grid; place-items:center; text-align:center;
  background:color-mix(in srgb,var(--fondo) 88%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); animation:aparecer .25s ease; }
.cargando-pantalla .logo-redondo { width:150px; height:auto; margin:0 auto 18px; }
.cargando-pantalla p { margin:0; font-size:19px; font-weight:600; }
.girando .l-aro { stroke-dasharray:.82 .18; animation:girar-aro 1.4s linear infinite; }
.girando .l-balon { transform-box:fill-box; transform-origin:center; animation:latir .7s ease-in-out infinite alternate; }
@keyframes girar-aro { to { stroke-dashoffset:-1; } }
@keyframes latir { from { transform:scale(.75); } to { transform:scale(1.1); } }
@keyframes aparecer { from { opacity:0; } }

/* Mientras Gemini mira las fotos */
.estado-ia.cargando { display:flex; align-items:center; gap:10px; }
.estado-ia.cargando::before { content:""; flex:none; width:18px; height:18px; border-radius:50%;
  border:2.5px solid var(--acento-suave); border-top-color:var(--acento); animation:girar .8s linear infinite; }
@keyframes girar { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .intro-logo { display:none; }
  .girando .l-aro, .girando .l-balon, .estado-ia.cargando::before { animation-duration:3s; }
}
.logo-horizontal { height:26px; width:130px; flex:none; }
.pie-marca .logo-horizontal { height:22px; width:110px; }
@media (max-width:420px) { .barra .logo-horizontal { height:22px; width:110px; } }