/* Formulario de cotización — MABATEC
   (html{font-size:75%}: 1rem = 12px, por eso van píxeles) */

.cotizar{ padding-bottom: 50px; }
.cotizar *{ text-transform: none; }

.form-cot{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px 20px;
    max-width: 860px;
    margin: 8px auto 0;
    background: rgba(255,255,255,.94);
    border-radius: 16px;
    padding: 26px;
}
.campo{ display:flex; flex-direction:column; }
.campo--ancho{ grid-column: 1 / -1; }

.form-cot label{
    font-family:'Roboto',sans-serif;
    font-size: 15px; font-weight: 700;
    color:#2f4021; margin-bottom: 6px;
}
.req{ color:#b4341f; }

.form-cot input[type=text],
.form-cot input[type=tel],
.form-cot textarea{
    font-family:'Roboto',sans-serif; font-size: 16px;
    color:#1a2715; background:#fff;
    border: 2px solid #cfd8c4; border-radius: 10px;
    padding: 11px 14px; width: 100%;
}
.form-cot textarea{ resize: vertical; line-height: 1.5; }
.form-cot input:focus,
.form-cot textarea:focus{
    outline: 3px solid #8fc74a; outline-offset: 2px; border-color:#4a8b34;
}

/* ---------- elegir productos ---------- */
/* Desplegable de verdad: el visitante ve que hay una lista.
   Con la flecha dibujada a mano porque el select del sistema no se puede
   estilar y quedaba distinto al resto de los campos. */
#elegirprod{
    font-family:'Roboto',sans-serif; font-size: 16px;
    color:#1a2715; background:#fff;
    border: 2px solid #cfd8c4; border-radius: 10px;
    padding: 11px 40px 11px 14px; width: 100%;
    cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232f5d22'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 22px 22px;
}
#elegirprod:focus{ outline: 3px solid #8fc74a; outline-offset: 2px; border-color:#4a8b34; }
#elegirprod optgroup{ font-weight: 700; color:#2f4021; }
#elegirprod option{ font-weight: 400; color:#1a2715; }

.elegidos{ list-style:none; margin: 11px 0 0; padding: 0;
    display:flex; flex-wrap: wrap; gap: 8px; }
.elegido{
    display:inline-flex; align-items:center; gap: 8px;
    font-family:'Roboto',sans-serif; font-size: 14px; font-weight: 600;
    background:#eaf3e2; color:#2f4021;
    border: 1px solid #c3d8b3; border-radius: 30px;
    padding: 7px 8px 7px 15px;
}
.elegido__quitar{
    background:#2f5d22; color:#fff; border:0; cursor:pointer;
    width: 21px; height: 21px; border-radius: 50%;
    font-size: 15px; line-height: 1; display:grid; place-items:center;
}
.elegido__quitar:hover{ background:#b4341f; }
.elegido__quitar:focus-visible{ outline: 2px solid #4a8b34; outline-offset: 2px; }

.ayuda{
    font-family:'Roboto',sans-serif; font-size: 14px;
    color:#5d6b55; margin: 8px 0 0; line-height: 1.5;
}
.ayuda--pie{ grid-column: 1 / -1; text-align:center; margin-top: 2px; }

.error{
    grid-column: 1 / -1; margin: 0;
    font-family:'Roboto',sans-serif; font-size: 15px; font-weight: 600;
    color:#8c2413; background:#fdecea;
    border: 1px solid #f3c2bb; border-radius: 10px; padding: 11px 15px;
}

/* ---------- botones de envío ---------- */
.botones{
    grid-column: 1 / -1;
    display:flex; flex-wrap: wrap; gap: 12px; justify-content:center;
    margin-top: 4px;
}
.btn{
    font-family:'Roboto',sans-serif; font-size: 16px; font-weight: 700;
    border:0; border-radius: 30px; cursor: pointer;
    padding: 14px 26px;
    display:inline-flex; align-items:center; gap: 10px;
}
.btn i{ font-size: 19px; }
.btn--wsp{ background:#25d366; color:#0b2b14; }
.btn--wsp:hover{ background:#1fbb59; }
.btn--mail{ background:#2f5d22; color:#fff; }
.btn--mail:hover{ background:#3d7a2c; }
.btn:focus-visible{ outline: 3px solid #8fc74a; outline-offset: 3px; }

@media (max-width: 700px){
    .form-cot{ grid-template-columns: minmax(0,1fr); padding: 20px 16px; gap: 14px; }
    .botones .btn{ width: 100%; justify-content:center; }
}