/*  Estilos propios del brief.
 *  El menú, el pie, los botones y la tipografía vienen de sitio.css,
 *  que es la hoja del sitio tal cual: aquí solo va lo del formulario.  */

body{background:var(--gris-1)}

.env--brief{max-width:880px}

.cabezal{background:var(--papel);border-bottom:1px solid var(--gris-2);padding:clamp(44px,7vw,72px) 0}
.cabezal h1{font-size:clamp(30px,4.6vw,46px)}
.cabezal p{color:var(--texto-2);max-width:60ch;margin-top:18px}

.datos{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;list-style:none;padding:0}
.datos li{
  display:flex;align-items:center;gap:8px;background:var(--azul-bruma);
  border:1px solid var(--gris-2);border-radius:999px;
  padding:8px 15px;font-size:14px;font-weight:600;color:var(--texto-2);
}

form.brief{padding:clamp(34px,5vw,54px) 0 clamp(60px,8vw,96px)}

.bloque{
  background:var(--papel);border:1px solid var(--gris-2);border-radius:var(--radio);
  padding:clamp(24px,3.6vw,34px);margin-bottom:20px;
  box-shadow:0 1px 2px rgba(5,6,31,.04);
}
.bloque h2{font-size:clamp(21px,2.6vw,27px)}
.bloque__tit{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
.bloque__num{
  flex:none;width:34px;height:34px;border-radius:10px;background:var(--azul-nube);
  color:var(--azul);font-family:var(--display);font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.bloque__pie{color:var(--texto-2);font-size:15.5px;margin:0 0 22px}
.opcional{
  display:inline-block;margin-left:8px;vertical-align:2px;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-2);background:var(--gris-1);border:1px solid var(--gris-2);
  border-radius:6px;padding:3px 8px;
}

.campo{margin-bottom:20px}
.campo:last-child{margin-bottom:0}
.campo > label,.grupo > legend{
  display:block;font-size:15px;font-weight:700;margin-bottom:7px;letter-spacing:-.005em;
}
.pista{display:block;font-size:14px;font-weight:500;color:var(--texto-2);margin:-3px 0 8px}

.req{
  display:inline-block;margin-left:8px;vertical-align:1px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--azul);background:var(--azul-nube);border-radius:5px;padding:2px 7px;
}
.brief :required{background:var(--papel);border-color:#C9DAF8}
.brief :required:focus{border-color:var(--azul)}
.brief :user-invalid{border-color:#D83A3A;background:#FFF6F6}

.faltan{
  background:#FFF6F6;border:1.5px solid #F3C2C2;border-radius:var(--radio-s);
  padding:16px 18px;margin-bottom:20px;font-size:15px;color:#8E2020;
}
.faltan b{display:block;margin-bottom:6px}
.faltan ul{margin:0;padding-left:20px}

.brief input[type=text],.brief input[type=email],.brief input[type=tel],
.brief input[type=url],.brief textarea,.brief select{
  width:100%;font-family:var(--body);font-size:16.5px;line-height:1.5;color:var(--texto);
  background:var(--gris-1);border:1.5px solid var(--gris-2);border-radius:var(--radio-s);
  padding:13px 15px;transition:border-color .15s,background .15s;
}
.brief input::placeholder,.brief textarea::placeholder{color:#93A0BC}
.brief input:focus,.brief textarea:focus,.brief select:focus{
  outline:none;border-color:var(--azul);background:var(--papel);
}
.brief textarea{resize:vertical;min-height:104px}

.grupo{border:0;padding:0;margin:0 0 20px}
.grupo:last-child{margin-bottom:0}
.casillas{display:flex;flex-wrap:wrap;gap:9px}
.casillas label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--gris-1);border:1.5px solid var(--gris-2);border-radius:999px;
  padding:9px 16px;font-size:15px;font-weight:600;transition:border-color .15s,background .15s;
}
.casillas label:hover{border-color:#C9DAF8;background:var(--azul-bruma)}
.casillas input{accent-color:var(--azul);width:17px;height:17px;margin:0;flex:none}

.ficha{
  border:1.5px dashed var(--gris-2);border-radius:var(--radio-s);
  padding:20px;margin-bottom:14px;background:var(--azul-bruma);
}
.ficha h3{
  margin-bottom:14px;color:var(--texto-2);font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:800;
}
.mas{
  background:none;border:1.5px dashed #C9DAF8;color:var(--azul);
  font-family:var(--body);font-size:15px;font-weight:700;cursor:pointer;
  border-radius:var(--radio-s);padding:12px 20px;width:100%;
  transition:background .15s,border-color .15s;
}
.mas:hover{background:var(--azul-nube);border-color:var(--azul)}

.suelta{
  position:relative;border:2px dashed #C9DAF8;border-radius:var(--radio);
  background:var(--azul-bruma);padding:30px 22px;text-align:center;
  transition:border-color .15s,background .15s;
}
.suelta:hover,.suelta--activa{border-color:var(--azul);background:var(--azul-nube)}
.suelta input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.suelta__ico{width:38px;height:38px;margin:0 auto 12px;color:var(--azul)}
.suelta strong{display:block;font-size:16.5px}
.suelta span{display:block;font-size:14px;color:var(--texto-2);margin-top:5px}
.lista-arch{list-style:none;margin:16px 0 0;padding:0;text-align:left}
.lista-arch li{
  display:flex;justify-content:space-between;gap:14px;font-size:14.5px;
  padding:9px 13px;background:var(--papel);border:1px solid var(--gris-2);
  border-radius:9px;margin-bottom:7px;
}
.lista-arch span{color:var(--texto-2);flex:none}

/*  Paso 1: lo que el cliente ya tiene. Va antes de las preguntas para
    que suba su brochure primero y se salte lo que ya viene ahí. */
.bloque--archivos{border-color:#C9DAF8;box-shadow:0 18px 40px -30px rgba(0,87,250,.45)}
.sirve{
  list-style:none;margin:0 0 22px;padding:0;
  display:grid;gap:12px 24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.sirve li{position:relative;padding-left:30px;font-size:15px;line-height:1.45}
.sirve li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--azul-nube) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057FA' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.sirve b{display:block;font-weight:700;color:var(--texto)}
.sirve span{display:block;font-size:14px;color:var(--texto-2)}
/*  La primera es la que más ahorra: el brochure o la lista de productos. */
.sirve li:first-child b{color:var(--azul)}

.aviso-archivos{
  margin:-6px auto 26px;max-width:560px;text-align:center;
  font-size:15px;color:var(--texto-2);line-height:1.5;
}
.aviso-archivos b{color:var(--texto)}

.o{
  display:flex;align-items:center;gap:14px;margin:22px 0;
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2);
}
.o::before,.o::after{content:"";flex:1;height:1px;background:var(--gris-2)}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.enviar{
  background:linear-gradient(135deg,var(--azul) 0%,var(--azul-hondo) 100%);
  color:var(--texto-inv);border-radius:var(--radio);
  padding:clamp(26px,4vw,38px);text-align:center;
}
.enviar h2{color:#FFFFFF;font-size:clamp(21px,2.6vw,27px);margin-bottom:12px}
.enviar p{color:var(--texto-inv-2);font-size:15.5px;max-width:52ch;margin-inline:auto}
.enviar .btn{background:#FFFFFF;color:var(--azul);margin-top:22px;box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
.enviar .btn:hover{background:var(--azul-nube)}

.guardado{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;color:var(--texto-2);margin-top:18px;
}
.guardado b{color:var(--verde)}

.tarjetas{display:grid;gap:18px;grid-template-columns:1fr;margin:34px 0 0}
@media (min-width:700px){.tarjetas{grid-template-columns:1fr 1fr}}
/* Con tres opciones, la tercera ocupa el renglón completo en vez de quedar coja. */
@media (min-width:700px){.tarjetas > .opcion:last-child:nth-child(odd){grid-column:1/-1}}
.opcion{
  display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--gris-2);
  border-radius:var(--radio);padding:clamp(26px,3.5vw,34px);text-decoration:none;color:inherit;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.opcion:hover{transform:translateY(-3px);border-color:#C9DAF8;box-shadow:0 18px 34px -22px rgba(5,6,31,.4)}
.opcion__ico{width:44px;height:44px;color:var(--azul);margin-bottom:18px}
.opcion h2{font-size:clamp(21px,2.6vw,27px);margin-bottom:10px}
.opcion p{color:var(--texto-2);font-size:15.5px;flex:1}
.opcion__ir{display:inline-flex;align-items:center;gap:8px;color:var(--azul);font-weight:700;margin-top:18px}

.centro{text-align:center}
.centro .plomo{margin-inline:auto}
.gracias{padding:clamp(70px,11vw,130px) 0}
.gracias h1{font-size:clamp(29px,4.2vw,42px)}
.gracias__ico{
  width:76px;height:76px;margin:0 auto 26px;border-radius:50%;
  background:var(--azul-nube);color:var(--azul);
  display:flex;align-items:center;justify-content:center;
}
.folio{
  display:inline-block;margin-top:24px;font-size:14px;font-weight:700;color:var(--texto-2);
  background:var(--papel);border:1px solid var(--gris-2);border-radius:999px;padding:9px 20px;
}
.ritmo{margin-top:26px;padding:20px 22px;background:#fff;border:1px solid var(--gris-2);border-radius:14px}
.cabezal .ritmo p{margin-top:8px;max-width:none}
.ritmo h2{font-size:clamp(19px,2.3vw,23px)}
.ritmo ol{list-style:none;counter-reset:paso;margin:12px 0 0;padding:0;display:grid;gap:8px}
.ritmo li{counter-increment:paso;position:relative;padding-left:34px;color:var(--texto-2);line-height:1.5}
.ritmo li::before{content:counter(paso);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--papel);border:1px solid var(--gris-2);text-align:center;font-size:13px;line-height:22px;font-weight:600}
.cabezal .ritmo__nota{font-weight:600;color:var(--texto)}
.lista-arch{position:relative;z-index:2}
.lista-arch li{align-items:center}
.quitar-arch{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--texto-2);font-size:20px;line-height:1;cursor:pointer}
.quitar-arch:hover{background:var(--gris-2);color:var(--texto)}
.lista-arch .lista-arch__total{justify-content:flex-start;background:transparent;border:0;padding:2px 4px;color:var(--texto-2);font-size:13.5px}
.lista-arch .lista-arch__mas{display:block;background:transparent;border:0;padding:0;margin:4px 0 8px}
.mas-arch{width:100%;padding:11px 14px;border:1.5px dashed var(--azul);border-radius:9px;background:var(--azul-nube);color:var(--azul);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.mas-arch:hover{background:#fff}