/* ==========================================================================
   Formularios: contacto
   Separado de cotizacion.css en la migracion del 27-08-2026: ese archivo
   tenia 335 lineas de la cotizacion con receta, que es de optica y se fue.
   ========================================================================== */

/* ==========================================================================
   Formulario de contacto
   ========================================================================== */

.sf-formulario { max-width: 560px; }

/* Los campos del formulario NO tenían estilo: solo estaba la regla del `select`,
   así que el rótulo salía en línea con el control, los `input` con el tamaño de
   fábrica del navegador y el `textarea` en monoespaciada. Es el mismo defecto que
   Daniel marcó en el carrito el 01-09-2026, en otra pantalla.

   El aspecto es el mismo que el del checkout, a propósito: son los mismos campos
   y no hay motivo para que se vean distintos según la página. */
.sf-formulario { display: grid; gap: var(--sf-esp-4); }

.sf-campo { display: block; }

.sf-campo label {
  display: block;
  margin-bottom: var(--sf-esp-2);
  font-size: var(--sf-etiqueta-tam);
  line-height: var(--sf-etiqueta-alto);
  font-weight: 600;
  letter-spacing: var(--sf-etiqueta-tracking);
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

.sf-campo input[type="text"],
.sf-campo input[type="tel"],
.sf-campo input[type="email"],
.sf-campo textarea,
.sf-campo select {
  width: 100%;
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m-tam);
  color: var(--sf-texto-principal);
}

.sf-campo input[type="text"],
.sf-campo input[type="tel"],
.sf-campo input[type="email"] { height: var(--sf-campo-alto); }

.sf-campo textarea {
  min-height: 128px;
  padding: var(--sf-esp-3);
  line-height: var(--sf-cuerpo-m-alto);
  resize: vertical;
}

.sf-campo input:focus-visible,
.sf-campo textarea:focus-visible,
.sf-campo select:focus-visible {
  outline: 2px solid var(--sf-acento-texto);
  outline-offset: 1px;
}

/* La casilla del consentimiento va en línea con su texto, no encima. Tampoco
   tenía estilo: salía la casilla del navegador con el texto pegado al lado. */
.sf-opcion--consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-esp-2);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
  cursor: pointer;
}

.sf-opcion--consentimiento input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }

.sf-cotiza__acciones {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-4);
  flex-wrap: wrap;
  margin-top: var(--sf-esp-2);
}

.sf-cotiza__contador {
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-alto-compacto);
  color: var(--sf-texto-secundario);
}

.sf-cotiza__ayuda { margin: 0 0 var(--sf-esp-5); color: var(--sf-texto-secundario); }

.sf-campo select {
  width: 100%;
  height: var(--sf-campo-alto);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m);
  color: var(--sf-texto-principal);
}

.sf-contacto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .sf-contacto { grid-template-columns: 340px 1fr; gap: var(--sf-esp-12); }
}

.sf-contacto__datos { display: flex; flex-direction: column; gap: var(--sf-esp-4); }

/* WhatsApp primero y con el número completo: es el canal que la óptica
   contesta de verdad. */
.sf-contacto__whatsapp {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
  padding: var(--sf-esp-6);
  background: var(--sf-superficie-bloque);
  border-left: 3px solid var(--sf-accion-acento);
  text-decoration: none;
}

.sf-contacto__whatsapp:hover { background: var(--sf-aviso-fondo); }
.sf-contacto__whatsapp .sf-icono { color: var(--sf-acento-texto); }
.sf-contacto__whatsapp strong { font-size: var(--sf-h4); color: var(--sf-texto-marca); }
.sf-contacto__whatsapp .sf-cuerpo-s { color: var(--sf-texto-secundario); }

.sf-contacto__bloque {
  padding: var(--sf-esp-4);
  background: var(--sf-superficie-bloque);
  border: 1px solid var(--sf-borde-sutil);
}

.sf-contacto__bloque p { margin: var(--sf-esp-2) 0 0; color: var(--sf-texto-secundario); }
.sf-contacto__formulario h2 { margin: 0 0 var(--sf-esp-2); }

.sf-mayorista__como h2,

/* --- Para qué los vas a usar ---------------------------------------------- */

/* Se pregunta por el uso y no por el tipo de cristal: el sistema de diseño pide
   que «monofocal», «progresivo» e «índice» no aparezcan en este flujo. */
.sf-uso {
  margin: var(--sf-esp-6) 0 0;
  padding: 0;
  border: 0;
}

.sf-uso__titulo {
  padding: 0;
  margin-bottom: var(--sf-esp-1);
  font-family: var(--sf-fuente-titulos);
  font-weight: var(--sf-titulos-peso);
  font-size: var(--sf-h4);
  line-height: var(--sf-h4-alto);
  color: var(--sf-texto-marca);
}

.sf-uso__opciones {
  display: grid;
  gap: var(--sf-esp-2);
  margin-top: var(--sf-esp-3);
}

.sf-uso__opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-esp-3);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  border: 1px solid var(--sf-borde-medio);
  background: var(--sf-superficie-base);
  cursor: pointer;
  min-height: var(--sf-alto-tactil);
}

.sf-uso__opcion:hover { border-color: var(--sf-accion-primaria); }

/* El radio no se esconde: es el control real y tiene que verse marcado. */
.sf-uso__opcion input { margin-top: 3px; flex: none; }

.sf-uso__opcion:has(input:checked) {
  border-color: var(--sf-accion-primaria);
  box-shadow: inset 0 0 0 1px var(--sf-accion-primaria);
}

.sf-uso__opcion:has(input:focus-visible) {
  outline: 2px solid var(--sf-foco);
  outline-offset: 2px;
}

.sf-uso__cuerpo { display: flex; flex-direction: column; gap: 2px; }

.sf-uso__nombre {
  font-weight: 600;
  color: var(--sf-texto-principal);
}

.sf-uso__ayuda {
  font-size: var(--sf-cuerpo-s);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

/* El aviso de la tienda. En ámbar y no en rojo: no es un error, es una
   recomendación, y quien quiera seguir online sigue. */
.sf-uso__aviso {
  margin-top: var(--sf-esp-3);
  padding: var(--sf-esp-4);
  background: var(--sf-aviso-fondo);
  border-left: 3px solid var(--sf-accion-acento);
}

.sf-uso__aviso p { margin: 0 0 var(--sf-esp-3); font-size: var(--sf-cuerpo-s); line-height: var(--sf-cuerpo-s-alto); }

.sf-uso__aviso-titulo {
  font-family: var(--sf-fuente-titulos);
  font-weight: var(--sf-titulos-peso);
  font-size: var(--sf-h5);
  line-height: var(--sf-h5-alto);
  color: var(--sf-texto-marca);
}